From c02c6acdc55120492f783c6b71d12ab2395e84d8 Mon Sep 17 00:00:00 2001
From: Alva Chien <alvachien@163.com>
Date: Tue, 25 Aug 2026 20:47:09 +0800
Subject: [PATCH 1/7] feat(rating): treat unrated (0) as numeric in < / <=
 filters; drop HasAny/HasNone

The rating < / <= filters previously excluded unrated (rating = 0) words
via a `rating > 0 &&` guard, so e.g. `< 1` matched nothing despite 0 < 1
being true. Remove the guard so unrated words compare numerically like any
other value. Since ratings are 1-5, `>= 1` now equals the former HasAny and
`< 1` equals the former HasNone, so the redundant HasAny/HasNone operators
are removed from the enum, matchRating, getRatingOperatorName, the three
Select-by-Rating dialogs (and their isValueDisabled getter + template
binding), and i18n. Vocabulary page (which never exposed HasAny/HasNone)
and the chinese/translate/knowledge Select-by-Rating dialogs all route
through the shared matchRating for consistent semantics. Tests updated.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/app/interfaces/ui-common.spec.ts          | 19 ++---
 src/app/interfaces/ui-common.ts               | 24 ++----
 src/app/interfaces/vocabulary.spec.ts         |  4 +-
 ...inese-exercises-selectbyrating-dialog.html |  2 +-
 .../chinese-exercises.component.spec.ts       | 64 +++++++---------
 .../chinese-exercises.component.ts            | 39 +---------
 ...knowledge-exercises-list.component.spec.ts | 67 ++++++++---------
 .../knowledge-exercises-list.component.ts     | 41 +---------
 ...ledge-exercises-selectbyrating-dialog.html |  2 +-
 ...slate-exercises-selectbyrating-dialog.html |  2 +-
 .../translate-exercises.component.spec.ts     | 74 ++++++++-----------
 .../translate-exercises.component.ts          | 41 +---------
 src/assets/data/i18n/en.json                  |  4 +-
 src/assets/data/i18n/zh-CN.json               |  4 +-
 14 files changed, 116 insertions(+), 271 deletions(-)

diff --git a/src/app/interfaces/ui-common.spec.ts b/src/app/interfaces/ui-common.spec.ts
index 724f76a..98b9870 100644
--- a/src/app/interfaces/ui-common.spec.ts
+++ b/src/app/interfaces/ui-common.spec.ts
@@ -2,10 +2,10 @@ import { RatingOperatorEnum, matchRating } from './ui-common';
 
 describe('ui-common.ts', () => {
   describe('matchRating', () => {
-    it('Equals matches only the exact rating', () => {
+    it('Equals matches only the exact rating, including unrated (0)', () => {
       expect(matchRating(3, RatingOperatorEnum.Equals, 3)).toBe(true);
       expect(matchRating(2, RatingOperatorEnum.Equals, 3)).toBe(false);
-      expect(matchRating(0, RatingOperatorEnum.Equals, 3)).toBe(false);
+      expect(matchRating(0, RatingOperatorEnum.Equals, 0)).toBe(true);
     });
 
     it('GreaterThan / LargerOrEquals compare against the value', () => {
@@ -15,19 +15,14 @@ describe('ui-common.ts', () => {
       expect(matchRating(2, RatingOperatorEnum.LargerOrEquals, 3)).toBe(false);
     });
 
-    it('LessThan / LessOrEquals exclude unrated (0) words', () => {
+    it('LessThan / LessOrEquals compare against the value and include unrated (0)', () => {
       expect(matchRating(2, RatingOperatorEnum.LessThan, 3)).toBe(true);
       expect(matchRating(3, RatingOperatorEnum.LessThan, 3)).toBe(false);
-      expect(matchRating(0, RatingOperatorEnum.LessThan, 3)).toBe(false);
+      expect(matchRating(0, RatingOperatorEnum.LessThan, 3)).toBe(true);
+      expect(matchRating(0, RatingOperatorEnum.LessThan, 1)).toBe(true);
+      expect(matchRating(1, RatingOperatorEnum.LessThan, 1)).toBe(false);
       expect(matchRating(3, RatingOperatorEnum.LessOrEquals, 3)).toBe(true);
-      expect(matchRating(0, RatingOperatorEnum.LessOrEquals, 3)).toBe(false);
-    });
-
-    it('HasAny / HasNone test ratedness', () => {
-      expect(matchRating(1, RatingOperatorEnum.HasAny, 0)).toBe(true);
-      expect(matchRating(0, RatingOperatorEnum.HasAny, 0)).toBe(false);
-      expect(matchRating(0, RatingOperatorEnum.HasNone, 0)).toBe(true);
-      expect(matchRating(4, RatingOperatorEnum.HasNone, 0)).toBe(false);
+      expect(matchRating(0, RatingOperatorEnum.LessOrEquals, 3)).toBe(true);
     });
   });
 });
diff --git a/src/app/interfaces/ui-common.ts b/src/app/interfaces/ui-common.ts
index f0916ac..9a5b609 100644
--- a/src/app/interfaces/ui-common.ts
+++ b/src/app/interfaces/ui-common.ts
@@ -21,8 +21,6 @@ export enum RatingOperatorEnum {
   'Equals' = 0,
   'GreaterThan' = 1,
   'LessThan' = 2,
-  'HasAny' = 3,
-  'HasNone' = 4,
   'LargerOrEquals' = 5,
   'LessOrEquals' = 6,
 }
@@ -57,10 +55,6 @@ export const getRatingOperatorName = (operator: RatingOperatorEnum): string => {
       return 'Greater Than';
     case RatingOperatorEnum.LessThan:
       return 'Less Than';
-    case RatingOperatorEnum.HasAny:
-      return 'Has Any';
-    case RatingOperatorEnum.HasNone:
-      return 'Has None';
     case RatingOperatorEnum.LargerOrEquals:
       return 'Larger or Equals';
     case RatingOperatorEnum.LessOrEquals:
@@ -72,10 +66,12 @@ export const getRatingOperatorName = (operator: RatingOperatorEnum): string => {
 
 /**
  * Shared rating comparison used by the vocabulary list filter bar (rating
- * conditions) so all rating matching goes through one place.
- * Note: LessThan / LessOrEquals intentionally exclude unrated (0) words — a
- * rating of 0 means "not yet assessed", which is covered by HasNone. This keeps
- * LessThan 1 from collapsing into HasNone.
+ * conditions) and the Select-by-Rating dialogs, so all rating matching goes
+ * through one place. An unrated word has rating 0 and is compared numerically
+ * like any other value: `< 1` / `<= 0` match unrated words, `>= 1` matches any
+ * rated word. (Ratings are 1–5, so `< 1` is equivalent to the former "HasNone"
+ * and `>= 1` to the former "HasAny", which is why those operators were
+ * dropped.)
  */
 export const matchRating = (
   rating: number,
@@ -90,13 +86,9 @@ export const matchRating = (
     case RatingOperatorEnum.LargerOrEquals:
       return rating >= value;
     case RatingOperatorEnum.LessThan:
-      return rating > 0 && rating < value;
+      return rating < value;
     case RatingOperatorEnum.LessOrEquals:
-      return rating > 0 && rating <= value;
-    case RatingOperatorEnum.HasAny:
-      return rating > 0;
-    case RatingOperatorEnum.HasNone:
-      return rating === 0;
+      return rating <= value;
     default:
       return false;
   }
diff --git a/src/app/interfaces/vocabulary.spec.ts b/src/app/interfaces/vocabulary.spec.ts
index 88168ea..43cc62a 100644
--- a/src/app/interfaces/vocabulary.spec.ts
+++ b/src/app/interfaces/vocabulary.spec.ts
@@ -150,13 +150,13 @@ describe('vocabulary.ts', () => {
       expect(matchVocabularyListFilter(item, 5, filter)).toBe(true);
       expect(matchVocabularyListFilter(item, 4, filter)).toBe(true);
       expect(matchVocabularyListFilter(item, 3, filter)).toBe(false);
-      // Unrated words are excluded from LessThan / LessOrEquals.
+      // Unrated (0) words compare numerically: 0 < 2 is true.
       expect(
         matchVocabularyListFilter(item, 0, {
           ...baseFilter,
           ratingConditions: [{ operator: RatingOperatorEnum.LessThan, value: 2 }],
         })
-      ).toBe(false);
+      ).toBe(true);
     });
 
     it('ANDs free text, word and rating conditions', () => {
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-selectbyrating-dialog.html b/src/app/pages/chinese-exercises/chinese-exercises-selectbyrating-dialog.html
index 10082ed..6f0a461 100644
--- a/src/app/pages/chinese-exercises/chinese-exercises-selectbyrating-dialog.html
+++ b/src/app/pages/chinese-exercises/chinese-exercises-selectbyrating-dialog.html
@@ -11,7 +11,7 @@ <h2 mat-dialog-title>{{ t('selectByRating') }}</h2>
     </mat-form-field>
     <mat-form-field class="control-full-width">
       <mat-label>{{ t('selection.ratingValue') }}</mat-label>
-      <mat-select [(ngModel)]="ratingValue" [disabled]="isValueDisabled">
+      <mat-select [(ngModel)]="ratingValue">
         @for (val of ratingValues; track val) {
           <mat-option [value]="val">{{ val }}</mat-option>
         }
diff --git a/src/app/pages/chinese-exercises/chinese-exercises.component.spec.ts b/src/app/pages/chinese-exercises/chinese-exercises.component.spec.ts
index 0c1220c..dd8b9ba 100644
--- a/src/app/pages/chinese-exercises/chinese-exercises.component.spec.ts
+++ b/src/app/pages/chinese-exercises/chinese-exercises.component.spec.ts
@@ -616,9 +616,10 @@ describe('ChineseExercisesComponent', () => {
       expect(component.selection.selected[0].id).toBe(1);
     });
 
-    it('should select items with any rating', () => {
+    it('should select items with any rating (>= 1)', () => {
+      // ratings: id1=5, id2=3, id3=0. LargerOrEquals 1 → id1, id2 (any rated).
       const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.HasAny }),
+        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 }),
       } as MatDialogRef<any>;
       dialogSpy.open.mockReturnValue(mockDialogRef);
 
@@ -627,9 +628,10 @@ describe('ChineseExercisesComponent', () => {
       expect(component.selection.selected.length).toBe(2);
     });
 
-    it('should select items with no rating', () => {
+    it('should select items with no rating (< 1)', () => {
+      // ratings: id1=5, id2=3, id3=0. LessThan 1 → only id3 (unrated, 0 < 1).
       const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.HasNone }),
+        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 }),
       } as MatDialogRef<any>;
       dialogSpy.open.mockReturnValue(mockDialogRef);
 
@@ -639,9 +641,9 @@ describe('ChineseExercisesComponent', () => {
       expect(component.selection.selected[0].id).toBe(3);
     });
 
-    it('should select rated items below the value, excluding unrated (0)', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 4 → only id2 (rating 3);
-      // id3 (unrated, 0) is deliberately excluded (covered by HasNone).
+    it('should select items with rating below the value, including unrated (0)', () => {
+      // ratings: id1=5, id2=3, id3=0. LessThan 4 → id2 (3) and id3 (0);
+      // unrated (0) compares numerically (0 < 4); use < 1 for unrated-only.
       const mockDialogRef = {
         afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 4 }),
       } as MatDialogRef<any>;
@@ -649,12 +651,13 @@ describe('ChineseExercisesComponent', () => {
 
       component.onSelectByRating();
 
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe(2);
+      expect(component.selection.selected.length).toBe(2);
+      expect(component.selection.selected.some(i => i.id === 2)).toBe(true);
+      expect(component.selection.selected.some(i => i.id === 3)).toBe(true);
     });
 
-    it('should select nothing when no rated item is below the value', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 2 → no rated item qualifies.
+    it('should select only unrated (0) items when no rated item is below the value', () => {
+      // ratings: id1=5, id2=3, id3=0. LessThan 2 → only id3 (unrated, 0 < 2).
       const mockDialogRef = {
         afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 2 }),
       } as MatDialogRef<any>;
@@ -662,7 +665,8 @@ describe('ChineseExercisesComponent', () => {
 
       component.onSelectByRating();
 
-      expect(component.selection.selected.length).toBe(0);
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.selected[0].id).toBe(3);
     });
 
     it('should select items with rating larger or equals 3', () => {
@@ -680,9 +684,9 @@ describe('ChineseExercisesComponent', () => {
       expect(component.selection.selected.some(i => i.id === 2)).toBe(true);
     });
 
-    it('should select items with rating less or equals 3, excluding unrated', () => {
-      // ratings: id1=5, id2=3, id3=0. LessOrEquals 3 → only id2 (rating 3);
-      // id3 (unrated, 0) is deliberately excluded (covered by HasNone).
+    it('should select items with rating less or equals 3, including unrated', () => {
+      // ratings: id1=5, id2=3, id3=0. LessOrEquals 3 → id2 (3) and id3 (0);
+      // unrated (0) compares numerically (0 <= 3).
       const mockDialogRef = {
         afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 3 }),
       } as MatDialogRef<any>;
@@ -690,13 +694,13 @@ describe('ChineseExercisesComponent', () => {
 
       component.onSelectByRating();
 
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe(2);
+      expect(component.selection.selected.length).toBe(2);
+      expect(component.selection.selected.some(i => i.id === 2)).toBe(true);
+      expect(component.selection.selected.some(i => i.id === 3)).toBe(true);
     });
 
-    it('should select nothing for less or equals when no rated item is at or below the value', () => {
-      // ratings: id1=5, id2=3, id3=0. LessOrEquals 2 → no rated item qualifies;
-      // id3 (unrated, 0) is excluded, confirming it does not collapse into HasNone.
+    it('should select only unrated (0) for less or equals when no rated item is at or below the value', () => {
+      // ratings: id1=5, id2=3, id3=0. LessOrEquals 2 → only id3 (unrated, 0 <= 2).
       const mockDialogRef = {
         afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 2 }),
       } as MatDialogRef<any>;
@@ -704,7 +708,8 @@ describe('ChineseExercisesComponent', () => {
 
       component.onSelectByRating();
 
-      expect(component.selection.selected.length).toBe(0);
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.selected[0].id).toBe(3);
     });
 
     it('should preserve the existing selection when the dialog is cancelled', () => {
@@ -1026,25 +1031,10 @@ describe('ChineseSelectByRatingDialogComponent', () => {
     });
   });
 
-  it('isValueDisabled should return true when HasAny operator is selected', () => {
-    component.ratingOperator.set(RatingOperatorEnum.HasAny);
-    expect(component.isValueDisabled).toBe(true);
-  });
-
-  it('isValueDisabled should return true when HasNone operator is selected', () => {
-    component.ratingOperator.set(RatingOperatorEnum.HasNone);
-    expect(component.isValueDisabled).toBe(true);
-  });
-
-  it('isValueDisabled should return false when Equals operator is selected', () => {
-    component.ratingOperator.set(RatingOperatorEnum.Equals);
-    expect(component.isValueDisabled).toBe(false);
-  });
-
   it('ratingOperators should include Larger or Equals and Less or Equals', () => {
     const values = component.ratingOperators.map(op => op.value);
     expect(values).toContain(RatingOperatorEnum.LargerOrEquals);
     expect(values).toContain(RatingOperatorEnum.LessOrEquals);
-    expect(component.ratingOperators.length).toBe(7);
+    expect(component.ratingOperators.length).toBe(5);
   });
 });
diff --git a/src/app/pages/chinese-exercises/chinese-exercises.component.ts b/src/app/pages/chinese-exercises/chinese-exercises.component.ts
index f76c340..3520769 100644
--- a/src/app/pages/chinese-exercises/chinese-exercises.component.ts
+++ b/src/app/pages/chinese-exercises/chinese-exercises.component.ts
@@ -66,6 +66,7 @@ import {
   getAllQuestionBankLevelEnumValues,
   convertChineseReciteItemToKnowledge,
   RatingOperatorEnum,
+  matchRating,
 } from '../../interfaces';
 import { LearningContentService, LearningRatingService, UIService } from '../../services';
 import { FooterComponent } from '../../shared/footer/footer';
@@ -461,36 +462,7 @@ export class ChineseExercisesComponent implements OnInit {
 
           this.dataSource.data.forEach(item => {
             const rating = this.getRating(item.id);
-            let matches = false;
-
-            switch (operator) {
-              case RatingOperatorEnum.Equals:
-                matches = rating === value;
-                break;
-              case RatingOperatorEnum.GreaterThan:
-                matches = rating > value;
-                break;
-              case RatingOperatorEnum.LargerOrEquals:
-                matches = rating >= value;
-                break;
-              case RatingOperatorEnum.LessThan:
-                // "Less than" intentionally excludes unrated (0) items: a rating
-                // of 0 means "not yet assessed", which is covered by HasNone.
-                // This keeps LessThan 1 from collapsing into HasNone.
-                matches = rating > 0 && rating < value;
-                break;
-              case RatingOperatorEnum.LessOrEquals:
-                // Same unrated-exclusion rationale as LessThan: an unrated (0)
-                // item is "not yet assessed", not "rated at or below the value".
-                matches = rating > 0 && rating <= value;
-                break;
-              case RatingOperatorEnum.HasAny:
-                matches = rating > 0;
-                break;
-              case RatingOperatorEnum.HasNone:
-                matches = rating === 0;
-                break;
-            }
+            const matches = matchRating(rating, operator, value);
 
             if (matches) {
               this.selection.select(item);
@@ -642,8 +614,6 @@ export class ChineseSelectByRatingDialogComponent {
       { value: RatingOperatorEnum.LargerOrEquals, label: 'operatorLargerOrEquals' },
       { value: RatingOperatorEnum.LessThan, label: 'operatorLessThan' },
       { value: RatingOperatorEnum.LessOrEquals, label: 'operatorLessOrEquals' },
-      { value: RatingOperatorEnum.HasAny, label: 'operatorHasAny' },
-      { value: RatingOperatorEnum.HasNone, label: 'operatorHasNone' },
     ];
   }
 
@@ -651,11 +621,6 @@ export class ChineseSelectByRatingDialogComponent {
     return [1, 2, 3, 4, 5];
   }
 
-  get isValueDisabled(): boolean {
-    return this.ratingOperator() === RatingOperatorEnum.HasAny ||
-           this.ratingOperator() === RatingOperatorEnum.HasNone;
-  }
-
   onNoClick(): void {
     this.dialogRef.close();
   }
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.spec.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.spec.ts
index dd4ea0d..9a23fa4 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.spec.ts
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.spec.ts
@@ -909,9 +909,9 @@ describe('KnowledgeExercisesListComponent', () => {
         expect(component.selection.selected.some(i => i.id === '20')).toBe(true);
       });
 
-      it('should select rated items below the value, excluding unrated (0)', () => {
-        // ratings: id10=5, id20=3, id30=0. LessThan 4 → only id20 (rating 3);
-        // id30 (unrated, 0) is deliberately excluded (covered by HasNone).
+      it('should select items with rating below the value, including unrated (0)', () => {
+        // ratings: id10=5, id20=3, id30=0. LessThan 4 → id20 (3) and id30 (0);
+        // unrated (0) compares numerically (0 < 4); use < 1 for unrated-only.
         const mockDialogRef = {
           afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 4 }),
         };
@@ -919,11 +919,13 @@ describe('KnowledgeExercisesListComponent', () => {
 
         component.onSelectByRating();
 
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('20');
+        expect(component.selection.selected.length).toBe(2);
+        expect(component.selection.selected.some(i => i.id === '20')).toBe(true);
+        expect(component.selection.selected.some(i => i.id === '30')).toBe(true);
       });
 
-      it('should select nothing when no rated item is below the value', () => {
+      it('should select only unrated (0) items when no rated item is below the value', () => {
+        // ratings: id10=5, id20=3, id30=0. LessThan 2 → only id30 (unrated, 0 < 2).
         const mockDialogRef = {
           afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 2 }),
         };
@@ -931,10 +933,13 @@ describe('KnowledgeExercisesListComponent', () => {
 
         component.onSelectByRating();
 
-        expect(component.selection.selected.length).toBe(0);
+        expect(component.selection.selected.length).toBe(1);
+        expect(component.selection.selected[0].id).toBe('30');
       });
 
-      it('should select items with rating less or equals 3, excluding unrated', () => {
+      it('should select items with rating less or equals 3, including unrated', () => {
+        // ratings: id10=5, id20=3, id30=0. LessOrEquals 3 → id20 (3) and id30 (0);
+        // unrated (0) compares numerically (0 <= 3).
         const mockDialogRef = {
           afterClosed: () =>
             of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 3 }),
@@ -943,11 +948,13 @@ describe('KnowledgeExercisesListComponent', () => {
 
         component.onSelectByRating();
 
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('20');
+        expect(component.selection.selected.length).toBe(2);
+        expect(component.selection.selected.some(i => i.id === '20')).toBe(true);
+        expect(component.selection.selected.some(i => i.id === '30')).toBe(true);
       });
 
-      it('should select nothing for less or equals when no rated item is at or below the value', () => {
+      it('should select only unrated (0) for less or equals when no rated item is at or below the value', () => {
+        // ratings: id10=5, id20=3, id30=0. LessOrEquals 2 → only id30 (unrated, 0 <= 2).
         const mockDialogRef = {
           afterClosed: () =>
             of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 2 }),
@@ -956,12 +963,14 @@ describe('KnowledgeExercisesListComponent', () => {
 
         component.onSelectByRating();
 
-        expect(component.selection.selected.length).toBe(0);
+        expect(component.selection.selected.length).toBe(1);
+        expect(component.selection.selected[0].id).toBe('30');
       });
 
-      it('should select items with any rating', () => {
+      it('should select items with any rating (>= 1)', () => {
+        // ratings: id10=5, id20=3, id30=0. LargerOrEquals 1 → id10, id20.
         const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.HasAny }),
+          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 }),
         };
         vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
 
@@ -970,9 +979,10 @@ describe('KnowledgeExercisesListComponent', () => {
         expect(component.selection.selected.length).toBe(2);
       });
 
-      it('should select items with no rating', () => {
+      it('should select items with no rating (< 1)', () => {
+        // ratings: id10=5, id20=3, id30=0. LessThan 1 → only id30 (unrated, 0 < 1).
         const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.HasNone }),
+          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 }),
         };
         vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
 
@@ -985,7 +995,7 @@ describe('KnowledgeExercisesListComponent', () => {
       it('should clear the previous selection before applying the rating match', () => {
         component.selection.select(mockContentWithIDs[0]);
         const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.HasNone }),
+          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 }),
         };
         vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
 
@@ -1010,7 +1020,7 @@ describe('KnowledgeExercisesListComponent', () => {
         const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
         markForCheckSpy.mockClear();
         const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.HasAny }),
+          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 }),
         };
         vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
 
@@ -1509,30 +1519,13 @@ describe('KnowledgeSelectByRatingDialogComponent', () => {
     });
   });
 
-  it('isValueDisabled should return true when HasAny operator is selected', () => {
-    component.ratingOperator.set(RatingOperatorEnum.HasAny);
-    expect(component.isValueDisabled).toBe(true);
-  });
-
-  it('isValueDisabled should return true when HasNone operator is selected', () => {
-    component.ratingOperator.set(RatingOperatorEnum.HasNone);
-    expect(component.isValueDisabled).toBe(true);
-  });
-
-  it('isValueDisabled should return false when Equals operator is selected', () => {
-    component.ratingOperator.set(RatingOperatorEnum.Equals);
-    expect(component.isValueDisabled).toBe(false);
-  });
-
-  it('ratingOperators should include all seven operators', () => {
+  it('ratingOperators should include all five value-based operators', () => {
     const values = component.ratingOperators.map(op => op.value);
     expect(values).toContain(RatingOperatorEnum.Equals);
     expect(values).toContain(RatingOperatorEnum.GreaterThan);
     expect(values).toContain(RatingOperatorEnum.LargerOrEquals);
     expect(values).toContain(RatingOperatorEnum.LessThan);
     expect(values).toContain(RatingOperatorEnum.LessOrEquals);
-    expect(values).toContain(RatingOperatorEnum.HasAny);
-    expect(values).toContain(RatingOperatorEnum.HasNone);
-    expect(component.ratingOperators.length).toBe(7);
+    expect(component.ratingOperators.length).toBe(5);
   });
 });
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.ts
index 3815256..5a6f90b 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.ts
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.ts
@@ -58,6 +58,7 @@ import {
   convertQuestionBankItemToMarkdown,
   QuestionBankTypeEnum,
   RatingOperatorEnum,
+  matchRating,
 } from '../../../interfaces';
 
 interface FilterResult {
@@ -683,36 +684,7 @@ export class KnowledgeExercisesListComponent implements OnInit {
 
           this.dataSource.data.forEach(item => {
             const rating = this.getRating(item.id);
-            let matches = false;
-
-            switch (operator) {
-              case RatingOperatorEnum.Equals:
-                matches = rating === value;
-                break;
-              case RatingOperatorEnum.GreaterThan:
-                matches = rating > value;
-                break;
-              case RatingOperatorEnum.LargerOrEquals:
-                matches = rating >= value;
-                break;
-              case RatingOperatorEnum.LessThan:
-                // "Less than" intentionally excludes unrated (0) items: a rating
-                // of 0 means "not yet assessed", which is covered by HasNone.
-                // This keeps LessThan 1 from collapsing into HasNone.
-                matches = rating > 0 && rating < value;
-                break;
-              case RatingOperatorEnum.LessOrEquals:
-                // Same unrated-exclusion rationale as LessThan: an unrated (0)
-                // item is "not yet assessed", not "rated at or below the value".
-                matches = rating > 0 && rating <= value;
-                break;
-              case RatingOperatorEnum.HasAny:
-                matches = rating > 0;
-                break;
-              case RatingOperatorEnum.HasNone:
-                matches = rating === 0;
-                break;
-            }
+            const matches = matchRating(rating, operator, value);
 
             if (matches) {
               this.selection.select(item);
@@ -957,8 +929,6 @@ export class KnowledgeSelectByRatingDialogComponent {
       { value: RatingOperatorEnum.LargerOrEquals, label: 'operatorLargerOrEquals' },
       { value: RatingOperatorEnum.LessThan, label: 'operatorLessThan' },
       { value: RatingOperatorEnum.LessOrEquals, label: 'operatorLessOrEquals' },
-      { value: RatingOperatorEnum.HasAny, label: 'operatorHasAny' },
-      { value: RatingOperatorEnum.HasNone, label: 'operatorHasNone' },
     ];
   }
 
@@ -966,13 +936,6 @@ export class KnowledgeSelectByRatingDialogComponent {
     return [1, 2, 3, 4, 5];
   }
 
-  get isValueDisabled(): boolean {
-    return (
-      this.ratingOperator() === RatingOperatorEnum.HasAny ||
-      this.ratingOperator() === RatingOperatorEnum.HasNone
-    );
-  }
-
   onNoClick(): void {
     this.dialogRef.close();
   }
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyrating-dialog.html b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyrating-dialog.html
index 10082ed..6f0a461 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyrating-dialog.html
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyrating-dialog.html
@@ -11,7 +11,7 @@ <h2 mat-dialog-title>{{ t('selectByRating') }}</h2>
     </mat-form-field>
     <mat-form-field class="control-full-width">
       <mat-label>{{ t('selection.ratingValue') }}</mat-label>
-      <mat-select [(ngModel)]="ratingValue" [disabled]="isValueDisabled">
+      <mat-select [(ngModel)]="ratingValue">
         @for (val of ratingValues; track val) {
           <mat-option [value]="val">{{ val }}</mat-option>
         }
diff --git a/src/app/pages/translate-exercises/translate-exercises-selectbyrating-dialog.html b/src/app/pages/translate-exercises/translate-exercises-selectbyrating-dialog.html
index 10082ed..6f0a461 100644
--- a/src/app/pages/translate-exercises/translate-exercises-selectbyrating-dialog.html
+++ b/src/app/pages/translate-exercises/translate-exercises-selectbyrating-dialog.html
@@ -11,7 +11,7 @@ <h2 mat-dialog-title>{{ t('selectByRating') }}</h2>
     </mat-form-field>
     <mat-form-field class="control-full-width">
       <mat-label>{{ t('selection.ratingValue') }}</mat-label>
-      <mat-select [(ngModel)]="ratingValue" [disabled]="isValueDisabled">
+      <mat-select [(ngModel)]="ratingValue">
         @for (val of ratingValues; track val) {
           <mat-option [value]="val">{{ val }}</mat-option>
         }
diff --git a/src/app/pages/translate-exercises/translate-exercises.component.spec.ts b/src/app/pages/translate-exercises/translate-exercises.component.spec.ts
index c4e3c46..333f417 100644
--- a/src/app/pages/translate-exercises/translate-exercises.component.spec.ts
+++ b/src/app/pages/translate-exercises/translate-exercises.component.spec.ts
@@ -647,9 +647,10 @@ describe('TranslateExercisesComponent', () => {
       expect(component.selection.selected[0].id).toBe('1');
     });
 
-    it('should select items with any rating', () => {
+    it('should select items with any rating (>= 1)', () => {
+      // ratings: id1=5, id2=3, id3=0. LargerOrEquals 1 → id1, id2.
       const mockDialogRef = {
-        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.HasAny })),
+        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 })),
       };
       mockDialog.open.mockReturnValue(mockDialogRef);
 
@@ -658,9 +659,10 @@ describe('TranslateExercisesComponent', () => {
       expect(component.selection.selected.length).toBe(2);
     });
 
-    it('should select items with no rating', () => {
+    it('should select items with no rating (< 1)', () => {
+      // ratings: id1=5, id2=3, id3=0. LessThan 1 → only id3 (unrated, 0 < 1).
       const mockDialogRef = {
-        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.HasNone })),
+        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 })),
       };
       mockDialog.open.mockReturnValue(mockDialogRef);
 
@@ -670,9 +672,9 @@ describe('TranslateExercisesComponent', () => {
       expect(component.selection.selected[0].id).toBe('3');
     });
 
-    it('should select rated items below the value, excluding unrated (0)', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 4 → only id2 (rating 3);
-      // id3 (unrated, 0) is deliberately excluded (covered by HasNone).
+    it('should select items with rating below the value, including unrated (0)', () => {
+      // ratings: id1=5, id2=3, id3=0. LessThan 4 → id2 (3) and id3 (0);
+      // unrated (0) compares numerically (0 < 4); use < 1 for unrated-only.
       const mockDialogRef = {
         afterClosed: vi
           .fn()
@@ -682,12 +684,13 @@ describe('TranslateExercisesComponent', () => {
 
       component.onSelectByRating();
 
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe('2');
+      expect(component.selection.selected.length).toBe(2);
+      expect(component.selection.selected.some(i => i.id === '2')).toBe(true);
+      expect(component.selection.selected.some(i => i.id === '3')).toBe(true);
     });
 
-    it('should select nothing when no rated item is below the value', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 2 → no rated item qualifies.
+    it('should select only unrated (0) items when no rated item is below the value', () => {
+      // ratings: id1=5, id2=3, id3=0. LessThan 2 → only id3 (unrated, 0 < 2).
       const mockDialogRef = {
         afterClosed: vi
           .fn()
@@ -697,7 +700,8 @@ describe('TranslateExercisesComponent', () => {
 
       component.onSelectByRating();
 
-      expect(component.selection.selected.length).toBe(0);
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.selected[0].id).toBe('3');
     });
 
     it('should select items with rating larger or equals 3', () => {
@@ -718,9 +722,9 @@ describe('TranslateExercisesComponent', () => {
       expect(component.selection.selected.some(i => i.id === '2')).toBe(true);
     });
 
-    it('should select items with rating less or equals 3, excluding unrated', () => {
-      // ratings: id1=5, id2=3, id3=0. LessOrEquals 3 → only id2 (rating 3);
-      // id3 (unrated, 0) is deliberately excluded (covered by HasNone).
+    it('should select items with rating less or equals 3, including unrated', () => {
+      // ratings: id1=5, id2=3, id3=0. LessOrEquals 3 → id2 (3) and id3 (0);
+      // unrated (0) compares numerically (0 <= 3).
       const mockDialogRef = {
         afterClosed: vi
           .fn()
@@ -730,13 +734,13 @@ describe('TranslateExercisesComponent', () => {
 
       component.onSelectByRating();
 
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe('2');
+      expect(component.selection.selected.length).toBe(2);
+      expect(component.selection.selected.some(i => i.id === '2')).toBe(true);
+      expect(component.selection.selected.some(i => i.id === '3')).toBe(true);
     });
 
-    it('should select nothing for less or equals when no rated item is at or below the value', () => {
-      // ratings: id1=5, id2=3, id3=0. LessOrEquals 2 → no rated item qualifies;
-      // id3 (unrated, 0) is excluded, confirming it does not collapse into HasNone.
+    it('should select only unrated (0) for less or equals when no rated item is at or below the value', () => {
+      // ratings: id1=5, id2=3, id3=0. LessOrEquals 2 → only id3 (unrated, 0 <= 2).
       const mockDialogRef = {
         afterClosed: vi
           .fn()
@@ -746,7 +750,8 @@ describe('TranslateExercisesComponent', () => {
 
       component.onSelectByRating();
 
-      expect(component.selection.selected.length).toBe(0);
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.selected[0].id).toBe('3');
     });
 
     it('should clear the previous selection before applying the new rating match', () => {
@@ -754,13 +759,13 @@ describe('TranslateExercisesComponent', () => {
       expect(component.selection.selected.length).toBe(1);
 
       const mockDialogRef = {
-        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.HasNone })),
+        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 })),
       };
       mockDialog.open.mockReturnValue(mockDialogRef);
 
       component.onSelectByRating();
 
-      // HasNone matches only id3; the previously selected id1 is dropped.
+      // < 1 matches only id3 (unrated); the previously selected id1 is dropped.
       expect(component.selection.selected.length).toBe(1);
       expect(component.selection.selected[0].id).toBe('3');
     });
@@ -784,7 +789,7 @@ describe('TranslateExercisesComponent', () => {
       const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
       markForCheckSpy.mockClear();
       const mockDialogRef = {
-        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.HasAny })),
+        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 })),
       };
       mockDialog.open.mockReturnValue(mockDialogRef);
 
@@ -1197,30 +1202,13 @@ describe('TranslateSelectByRatingDialogComponent', () => {
     });
   });
 
-  it('isValueDisabled should return true when HasAny operator is selected', () => {
-    component.ratingOperator.set(RatingOperatorEnum.HasAny);
-    expect(component.isValueDisabled).toBe(true);
-  });
-
-  it('isValueDisabled should return true when HasNone operator is selected', () => {
-    component.ratingOperator.set(RatingOperatorEnum.HasNone);
-    expect(component.isValueDisabled).toBe(true);
-  });
-
-  it('isValueDisabled should return false when Equals operator is selected', () => {
-    component.ratingOperator.set(RatingOperatorEnum.Equals);
-    expect(component.isValueDisabled).toBe(false);
-  });
-
-  it('ratingOperators should include all seven operators', () => {
+  it('ratingOperators should include all five value-based operators', () => {
     const values = component.ratingOperators.map(op => op.value);
     expect(values).toContain(RatingOperatorEnum.Equals);
     expect(values).toContain(RatingOperatorEnum.GreaterThan);
     expect(values).toContain(RatingOperatorEnum.LargerOrEquals);
     expect(values).toContain(RatingOperatorEnum.LessThan);
     expect(values).toContain(RatingOperatorEnum.LessOrEquals);
-    expect(values).toContain(RatingOperatorEnum.HasAny);
-    expect(values).toContain(RatingOperatorEnum.HasNone);
-    expect(component.ratingOperators.length).toBe(7);
+    expect(component.ratingOperators.length).toBe(5);
   });
 });
diff --git a/src/app/pages/translate-exercises/translate-exercises.component.ts b/src/app/pages/translate-exercises/translate-exercises.component.ts
index b82ef89..f8593c1 100644
--- a/src/app/pages/translate-exercises/translate-exercises.component.ts
+++ b/src/app/pages/translate-exercises/translate-exercises.component.ts
@@ -65,6 +65,7 @@ import {
   getAllPrintExecDateString,
   QuestionBankTypeEnum,
   RatingOperatorEnum,
+  matchRating,
 } from '../../interfaces';
 import {
   LearningContentService,
@@ -615,36 +616,7 @@ export class TranslateExercisesComponent implements OnInit {
 
           this.dataSource.data.forEach(item => {
             const rating = this.getRating(item.id);
-            let matches = false;
-
-            switch (operator) {
-              case RatingOperatorEnum.Equals:
-                matches = rating === value;
-                break;
-              case RatingOperatorEnum.GreaterThan:
-                matches = rating > value;
-                break;
-              case RatingOperatorEnum.LargerOrEquals:
-                matches = rating >= value;
-                break;
-              case RatingOperatorEnum.LessThan:
-                // "Less than" intentionally excludes unrated (0) items: a rating
-                // of 0 means "not yet assessed", which is covered by HasNone.
-                // This keeps LessThan 1 from collapsing into HasNone.
-                matches = rating > 0 && rating < value;
-                break;
-              case RatingOperatorEnum.LessOrEquals:
-                // Same unrated-exclusion rationale as LessThan: an unrated (0)
-                // item is "not yet assessed", not "rated at or below the value".
-                matches = rating > 0 && rating <= value;
-                break;
-              case RatingOperatorEnum.HasAny:
-                matches = rating > 0;
-                break;
-              case RatingOperatorEnum.HasNone:
-                matches = rating === 0;
-                break;
-            }
+            const matches = matchRating(rating, operator, value);
 
             if (matches) {
               this.selection.select(item);
@@ -935,8 +907,6 @@ export class TranslateSelectByRatingDialogComponent {
       { value: RatingOperatorEnum.LargerOrEquals, label: 'operatorLargerOrEquals' },
       { value: RatingOperatorEnum.LessThan, label: 'operatorLessThan' },
       { value: RatingOperatorEnum.LessOrEquals, label: 'operatorLessOrEquals' },
-      { value: RatingOperatorEnum.HasAny, label: 'operatorHasAny' },
-      { value: RatingOperatorEnum.HasNone, label: 'operatorHasNone' },
     ];
   }
 
@@ -944,13 +914,6 @@ export class TranslateSelectByRatingDialogComponent {
     return [1, 2, 3, 4, 5];
   }
 
-  get isValueDisabled(): boolean {
-    return (
-      this.ratingOperator() === RatingOperatorEnum.HasAny ||
-      this.ratingOperator() === RatingOperatorEnum.HasNone
-    );
-  }
-
   onNoClick(): void {
     this.dialogRef.close();
   }
diff --git a/src/assets/data/i18n/en.json b/src/assets/data/i18n/en.json
index 249264f..b799c57 100644
--- a/src/assets/data/i18n/en.json
+++ b/src/assets/data/i18n/en.json
@@ -336,9 +336,7 @@
     "operatorGreaterThan": "Greater Than",
     "operatorLessThan": "Less Than",
     "operatorLargerOrEquals": "Larger or Equals",
-    "operatorLessOrEquals": "Less or Equals",
-    "operatorHasAny": "Has Any Rating",
-    "operatorHasNone": "Has No Rating"
+    "operatorLessOrEquals": "Less or Equals"
   },
   "auth": {
     "login": "Login",
diff --git a/src/assets/data/i18n/zh-CN.json b/src/assets/data/i18n/zh-CN.json
index 82919a9..dfa7cee 100644
--- a/src/assets/data/i18n/zh-CN.json
+++ b/src/assets/data/i18n/zh-CN.json
@@ -334,9 +334,7 @@
     "operatorGreaterThan": "大于",
     "operatorLessThan": "小于",
     "operatorLargerOrEquals": "大于等于",
-    "operatorLessOrEquals": "小于等于",
-    "operatorHasAny": "有评分",
-    "operatorHasNone": "无评分"
+    "operatorLessOrEquals": "小于等于"
   },
   "auth": {
     "login": "登录",

From a0737f2cca2efdc3f9c8645316bea987b967dfc8 Mon Sep 17 00:00:00 2001
From: Alva Chien <alvachien@163.com>
Date: Tue, 25 Aug 2026 20:49:46 +0800
Subject: [PATCH 2/7] docs(vocabulary): reflect unrated-as-0 semantics and
 HasAny/HasNone removal

Update the rating-filter matching description (unrated 0 now compared
numerically; < 1 matches unrated, >= 1 matches any rated) and the
RatingOperatorEnum member list (HasAny/HasNone dropped) in
vocabulary-exercises-architecture.md to match the code change in the
prior commit.

Co-Authored-By: Claude <noreply@anthropic.com>
---
 docs/vocabulary-exercises-architecture.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/vocabulary-exercises-architecture.md b/docs/vocabulary-exercises-architecture.md
index e73cdac..0b49c61 100644
--- a/docs/vocabulary-exercises-architecture.md
+++ b/docs/vocabulary-exercises-architecture.md
@@ -426,7 +426,7 @@ Matching is `freeText AND every active word condition AND every rating condition
 
 - `freeText`: lowercased substring of `${id}${enword}${cnword}` (mirrors the old default `MatTableDataSource` predicate).
 - `wordConditions`: text operators compare lowercased `enword`; phrase operators match on shape (`isPhrase` = `enword` contains a space; `notPhrase` = the negation) and are always active.
-- `ratingConditions`: each delegated to `matchRating(rating, operator, value)` (`ui-common.ts`); `LessThan`/`LessOrEquals` intentionally exclude unrated (`0`) words so "LessThan 1" does not collapse into "HasNone".
+- `ratingConditions`: each delegated to `matchRating(rating, operator, value)` (`ui-common.ts`). An unrated word has rating `0` and is compared numerically like any other value, so `< 1` matches unrated words and `>= 1` matches any rated word (ratings are 1–5). The Rating filter dialog offers only the five value-based operators (`>=`, `>`, `=`, `<=`, `<`) with values 1–5; the former `HasAny`/`HasNone` operators were removed as redundant (`>= 1` ≡ HasAny, `< 1` ≡ HasNone).
 
 ### 8.2 Wiring through `MatTableDataSource`
 
@@ -544,7 +544,7 @@ interface RatingCondition  { operator: RatingOperatorEnum; value: number; }
 interface VocabularyListFilter { freeText: string; wordConditions: WordCondition[]; ratingConditions: RatingCondition[]; }
 ```
 
-`RatingOperatorEnum` (`Equals`, `GreaterThan`, `LessThan`, `HasAny`, `HasNone`, `LargerOrEquals`, `LessOrEquals`) and `SelectionModeEnum` (`ByID`, `FreeSelection`, `ByCount`) live in `ui-common.ts`, alongside `matchRating()`.
+`RatingOperatorEnum` (`Equals`, `GreaterThan`, `LessThan`, `LargerOrEquals`, `LessOrEquals`) and `SelectionModeEnum` (`ByID`, `FreeSelection`, `ByCount`) live in `ui-common.ts`, alongside `matchRating()`, which compares an unrated (`0`) word numerically.
 
 ### 10.6 Pure helpers
 

From 8f5fff56383ad91d9ac31cf19c01c5a0d80b8dd2 Mon Sep 17 00:00:00 2001
From: Alva Chien <alvachien@163.com>
Date: Tue, 25 Aug 2026 20:53:48 +0800
Subject: [PATCH 3/7] chore: bump version to 1.8.434

Co-Authored-By: Claude <noreply@anthropic.com>
---
 package.json                         | 2 +-
 src/environments/environment.prod.ts | 4 ++--
 src/environments/environment.ts      | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index a00f8e2..e451f3c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "knowledgebuilder",
-  "version": "1.8.433",
+  "version": "1.8.434",
   "license": "MIT",
   "description": "An AI-powered web-based Learning app for English, Chinese, and Knowledge Bank part.",
   "author": {
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index ea2ac9b..6f1d1bd 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,8 +1,8 @@
 export const environment = {
   homeurl: 'https://www.alvachien.com/learning',
   production: true,
-  releasedate: '2026-08-23',
-  version: '1.8.433',
+  releasedate: '2026-08-25',
+  version: '1.8.434',
   apiUrl: 'https://www.alvachien.com/learningutil',
   pageTitle: 'Knowledge Builder',
   loginRequired: true,
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 60abc6e..7f33683 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -6,8 +6,8 @@
 export const environment = {
   homeurl: 'http://localhost:29800',
   production: false,
-  releasedate: '2026-08-23',
-  version: '1.8.433',
+  releasedate: '2026-08-25',
+  version: '1.8.434',
   apiUrl: 'https://localhost:7135',
   pageTitle: 'Knowledge Builder',
   loginRequired: true,

From 6fbd2b5ee3d7a0835ac16c8c95ab8991f112dddc Mon Sep 17 00:00:00 2001
From: Alva Chien <alvachien@163.com>
Date: Sun, 30 Aug 2026 18:42:41 +0800
Subject: [PATCH 4/7] feat(filter): shared filter dialog across all list pages

Complete the reusable-filter-dialog rollout (docs/reusable-filter-dialog-design.md):
the dialog, the vocabulary adoption, and the Chinese/translate/knowledge
migrations now live in the tree, replacing 7 page-local filter dialogs.

- src/app/shared/filter-dialog: tree editor + pure model (schema-driven
  properties, seed/emit round-trip, validation, summaries); string
  operators now expose actslib's full matrix incl. lexicographic/Between
- chinese: one filterDefinition + single Filter menu (was two dialogs/menus)
- translate: same collapse onto SENTENCE_FILTER_PROPERTIES; adds the
  missing top-level 'english' i18n key the old dialog rendered raw
- knowledge: KNOWLEDGE_FILTER_PROPERTIES with itemType as the enum proof
  (enumValues + choices labeled like the Type column)
- rating Between added to all four pages' whitelists (legacy dialogs never
  offered it; the shared editor does; unrated = 0 keeps comparing)
- retire RatingOperatorEnum/RatingCondition/matchRating/summarizeRatingFilter
  from ui-common (no hand-written matchers left)
- deprecate page-local select-by-rating dialogs; decompose translate page into
  session/result components; i18n + docs updated to as-built

Tests: 1826 passing across 71 spec files.

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 CLAUDE.md                                     |    4 +-
 docs/knowledge-chinese-pages-review.md        |  173 ++
 docs/reusable-filter-dialog-design.md         |  598 ++++++
 docs/vocabulary-exercises-architecture.md     |   84 +-
 src/app/interfaces/index.ts                   |    2 +
 .../interfaces/knowledge-list-filter.spec.ts  |  232 +++
 src/app/interfaces/knowledge-list-filter.ts   |  192 ++
 src/app/interfaces/learnchinese.spec.ts       |  181 ++
 src/app/interfaces/learnchinese.ts            |  135 ++
 src/app/interfaces/questionbank-base.ts       |    8 -
 src/app/interfaces/sentence.spec.ts           |  262 +++
 src/app/interfaces/sentence.ts                |  308 ++++
 src/app/interfaces/translate-data.ts          |    1 -
 src/app/interfaces/ui-common.spec.ts          |   28 -
 src/app/interfaces/ui-common.ts               |   56 -
 src/app/interfaces/vocabulary.spec.ts         |  380 ++--
 src/app/interfaces/vocabulary.ts              |  303 +--
 .../chinese-exercises-list.component.html     |  161 ++
 .../chinese-exercises-list.component.scss     |   82 +
 .../chinese-exercises-list.component.spec.ts  |  217 +++
 .../chinese-exercises-list.component.ts       |  234 +++
 ...nese-exercises-options-dialog.component.ts |   77 +
 .../chinese-exercises-options-dialog.html     |   48 +-
 ...exercises-printoptions-dialog.component.ts |  103 ++
 ...chinese-exercises-printoptions-dialog.html |    2 +-
 ...-exercises-select-dialog.component.spec.ts |   99 +
 ...inese-exercises-select-dialog.component.ts |   99 +
 .../chinese-exercises-select-dialog.html      |   27 +
 ...inese-exercises-selectbyrating-dialog.html |   25 -
 .../chinese-exercises.component.html          |  165 +-
 .../chinese-exercises.component.scss          |   14 -
 .../chinese-exercises.component.spec.ts       | 1191 +++++-------
 .../chinese-exercises.component.ts            |  850 ++++-----
 .../english-listening.component.html          |   12 +-
 .../formula-recites-printoptions-dialog.html  |    4 +-
 .../formula-recites.component.html            |    2 +-
 .../formula-recites.component.ts              |    6 +-
 .../_knowledge-exercises-theme.scss           |    8 +-
 .../knowledge-exercises-list/index.ts         |    3 +
 .../knowledge-exercises-list.component.html   |  381 ++--
 .../knowledge-exercises-list.component.scss   |   92 +-
 ...knowledge-exercises-list.component.spec.ts | 1623 ++---------------
 .../knowledge-exercises-list.component.ts     | 1047 ++---------
 ...ises-printoptions-dialog.component.spec.ts |  133 ++
 ...exercises-printoptions-dialog.component.ts |  101 +
 .../knowledge-exercises-printoptions-dlg.html |    2 +-
 ...-exercises-select-dialog.component.spec.ts |  130 ++
 ...ledge-exercises-select-dialog.component.ts |  143 ++
 .../knowledge-exercises-select-dialog.html    |   33 +
 ...wledge-exercises-selectbycount-dialog.html |   17 -
 ...knowledge-exercises-selectbyid-dialog.html |   13 -
 ...ledge-exercises-selectbyrating-dialog.html |   25 -
 ...knowledge-exercises-selectfree-dialog.html |   17 -
 .../knowledge-exercises.component.html        |  121 ++
 .../knowledge-exercises.component.scss        |   24 +
 .../knowledge-exercises.component.spec.ts     |  778 ++++++++
 .../knowledge-exercises.component.ts          |  785 ++++++++
 .../knowledge-exercises.routers.ts            |    4 +-
 ...anslate-exercises-info-dialog.component.ts |   41 +
 .../translate-exercises-info-dialog.html      |    2 +-
 ...ranslate-exercises-llm-dialog.component.ts |   93 +
 ...late-exercises-options-dialog.component.ts |   84 +
 .../translate-exercises-options-dialog.html   |    7 +-
 ...exercises-printoptions-dialog.component.ts |  105 ++
 ...anslate-exercises-printoptions-dialog.html |    4 +-
 ...slate-exercises-quiz-result.component.html |   30 +
 ...slate-exercises-quiz-result.component.scss |   26 +
 ...te-exercises-quiz-result.component.spec.ts |   85 +
 ...anslate-exercises-quiz-result.component.ts |   31 +
 ...late-exercises-quiz-session.component.html |   56 +
 ...late-exercises-quiz-session.component.scss |  102 ++
 ...e-exercises-quiz-session.component.spec.ts |  112 ++
 ...nslate-exercises-quiz-session.component.ts |   63 +
 ...slate-exercises-quiz-session.store.spec.ts |  249 +++
 .../translate-exercises-quiz-session.store.ts |  169 ++
 ...-exercises-quizoptions-dialog.component.ts |   76 +
 ...ranslate-exercises-quizoptions-dialog.html |   14 +
 ...te-exercises-review-session.component.html |   60 +
 ...te-exercises-review-session.component.scss |   54 +
 ...exercises-review-session.component.spec.ts |   83 +
 ...late-exercises-review-session.component.ts |  162 ++
 ...ate-exercises-review-session.store.spec.ts |  612 +++++++
 ...ranslate-exercises-review-session.store.ts |  333 ++++
 ...xercises-reviewoptions-dialog.component.ts |   79 +
 ...nslate-exercises-reviewoptions-dialog.html |   17 +
 ...slate-exercises-select-dialog.component.ts |   99 +
 .../translate-exercises-select-dialog.html    |   27 +
 ...slate-exercises-selectbyrating-dialog.html |   25 -
 ...ate-exercises-sentence-list.component.html |  194 ++
 ...ate-exercises-sentence-list.component.scss |   88 +
 ...-exercises-sentence-list.component.spec.ts |  200 ++
 ...slate-exercises-sentence-list.component.ts |  231 +++
 ...ate-exercises-typing-result.component.html |   47 +
 ...ate-exercises-typing-result.component.scss |   15 +
 ...-exercises-typing-result.component.spec.ts |   69 +
 ...slate-exercises-typing-result.component.ts |   32 +
 ...te-exercises-typing-session.component.html |   34 +
 ...te-exercises-typing-session.component.scss |   28 +
 ...exercises-typing-session.component.spec.ts |   64 +
 ...late-exercises-typing-session.component.ts |   39 +
 ...ate-exercises-typing-session.store.spec.ts |  134 ++
 ...ranslate-exercises-typing-session.store.ts |  124 ++
 .../translate-exercises.component.html        |  313 +---
 .../translate-exercises.component.scss        |   18 +-
 .../translate-exercises.component.spec.ts     | 1565 ++++++++++------
 .../translate-exercises.component.ts          | 1281 ++++++-------
 src/app/pages/vocabulary-exercises/index.ts   |    2 -
 ...-exercises-dictation-result.component.html |    2 +-
 ...exercises-dictation-session.component.html |    4 +-
 ...abulary-exercises-quit-confirm-dialog.html |    2 +-
 ...ulary-exercises-quiz-result.component.html |    6 +-
 ...lary-exercises-quiz-session.component.html |   14 +-
 ...y-exercises-quiz-session.component.spec.ts |    4 +-
 ...vocabulary-exercises-quiz-session.store.ts |    4 +-
 ...cabulary-exercises-quizoptions-dialog.html |    2 +-
 ...rcises-rating-filter-dialog.component.html |   35 -
 ...rcises-rating-filter-dialog.component.scss |   14 -
 ...ses-rating-filter-dialog.component.spec.ts |   92 -
 ...xercises-rating-filter-dialog.component.ts |   78 -
 ...ry-exercises-review-session.component.html |   16 +-
 ...ary-exercises-review-session.store.spec.ts |   87 +-
 ...cabulary-exercises-review-session.store.ts |   29 +-
 ...bulary-exercises-reviewoptions-dialog.html |    4 +-
 ...ulary-exercises-select-dialog.component.ts |    6 +-
 ...y-exercises-spelling-result.component.html |    4 +-
 ...-exercises-spelling-session.component.html |    6 +-
 ...ercises-spelling-session.component.spec.ts |   28 +-
 ...ry-exercises-spelling-session.component.ts |   21 +-
 ...lary-exercises-spellingoptions-dialog.html |    2 +-
 ...xercises-word-filter-dialog.component.html |   35 -
 ...xercises-word-filter-dialog.component.scss |   10 -
 ...cises-word-filter-dialog.component.spec.ts |  122 --
 ...-exercises-word-filter-dialog.component.ts |   89 -
 ...abulary-exercises-word-list.component.html |   52 +-
 ...abulary-exercises-word-list.component.scss |    4 -
 ...lary-exercises-word-list.component.spec.ts |  152 +-
 ...ocabulary-exercises-word-list.component.ts |  102 +-
 ...ary-exercises-worksheetoptions-dialog.html |    2 +-
 .../vocabulary-exercises.component.html       |    9 +-
 .../vocabulary-exercises.component.spec.ts    |  402 +++-
 .../vocabulary-exercises.component.ts         |  257 ++-
 .../filter-dialog/filter-dialog-model.spec.ts |  581 ++++++
 .../filter-dialog/filter-dialog-model.ts      |  816 +++++++++
 .../filter-dialog.component.html              |  165 ++
 .../filter-dialog.component.scss              |  220 +++
 .../filter-dialog.component.spec.ts           |  332 ++++
 .../filter-dialog/filter-dialog.component.ts  |  458 +++++
 src/app/shared/filter-dialog/index.ts         |    6 +
 src/app/shared/utils/shuffle.spec.ts          |   34 +
 src/app/shared/utils/shuffle.ts               |   28 +-
 src/assets/data/i18n/en.json                  |  283 +--
 src/assets/data/i18n/zh-CN.json               |  281 +--
 src/styles/_shared-tables.scss                |   23 +-
 153 files changed, 16944 insertions(+), 7202 deletions(-)
 create mode 100644 docs/knowledge-chinese-pages-review.md
 create mode 100644 docs/reusable-filter-dialog-design.md
 create mode 100644 src/app/interfaces/knowledge-list-filter.spec.ts
 create mode 100644 src/app/interfaces/knowledge-list-filter.ts
 create mode 100644 src/app/interfaces/sentence.spec.ts
 create mode 100644 src/app/interfaces/sentence.ts
 delete mode 100644 src/app/interfaces/ui-common.spec.ts
 create mode 100644 src/app/pages/chinese-exercises/chinese-exercises-list.component.html
 create mode 100644 src/app/pages/chinese-exercises/chinese-exercises-list.component.scss
 create mode 100644 src/app/pages/chinese-exercises/chinese-exercises-list.component.spec.ts
 create mode 100644 src/app/pages/chinese-exercises/chinese-exercises-list.component.ts
 create mode 100644 src/app/pages/chinese-exercises/chinese-exercises-options-dialog.component.ts
 create mode 100644 src/app/pages/chinese-exercises/chinese-exercises-printoptions-dialog.component.ts
 create mode 100644 src/app/pages/chinese-exercises/chinese-exercises-select-dialog.component.spec.ts
 create mode 100644 src/app/pages/chinese-exercises/chinese-exercises-select-dialog.component.ts
 create mode 100644 src/app/pages/chinese-exercises/chinese-exercises-select-dialog.html
 delete mode 100644 src/app/pages/chinese-exercises/chinese-exercises-selectbyrating-dialog.html
 create mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dialog.component.spec.ts
 create mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dialog.component.ts
 create mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.component.spec.ts
 create mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.component.ts
 create mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.html
 delete mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbycount-dialog.html
 delete mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyid-dialog.html
 delete mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyrating-dialog.html
 delete mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectfree-dialog.html
 create mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.html
 create mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.scss
 create mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.spec.ts
 create mode 100644 src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-info-dialog.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-llm-dialog.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-options-dialog.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-printoptions-dialog.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-result.component.html
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-result.component.scss
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-result.component.spec.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-result.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-session.component.html
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-session.component.scss
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-session.component.spec.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-session.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-session.store.spec.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quiz-session.store.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quizoptions-dialog.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-quizoptions-dialog.html
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-review-session.component.html
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-review-session.component.scss
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-review-session.component.spec.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-review-session.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-review-session.store.spec.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-review-session.store.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-reviewoptions-dialog.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-reviewoptions-dialog.html
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-select-dialog.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-select-dialog.html
 delete mode 100644 src/app/pages/translate-exercises/translate-exercises-selectbyrating-dialog.html
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-sentence-list.component.html
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-sentence-list.component.scss
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-sentence-list.component.spec.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-sentence-list.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-result.component.html
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-result.component.scss
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-result.component.spec.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-result.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-session.component.html
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-session.component.scss
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-session.component.spec.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-session.component.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-session.store.spec.ts
 create mode 100644 src/app/pages/translate-exercises/translate-exercises-typing-session.store.ts
 delete mode 100644 src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.html
 delete mode 100644 src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.scss
 delete mode 100644 src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.spec.ts
 delete mode 100644 src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.ts
 delete mode 100644 src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.html
 delete mode 100644 src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.scss
 delete mode 100644 src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.spec.ts
 delete mode 100644 src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.ts
 create mode 100644 src/app/shared/filter-dialog/filter-dialog-model.spec.ts
 create mode 100644 src/app/shared/filter-dialog/filter-dialog-model.ts
 create mode 100644 src/app/shared/filter-dialog/filter-dialog.component.html
 create mode 100644 src/app/shared/filter-dialog/filter-dialog.component.scss
 create mode 100644 src/app/shared/filter-dialog/filter-dialog.component.spec.ts
 create mode 100644 src/app/shared/filter-dialog/filter-dialog.component.ts
 create mode 100644 src/app/shared/filter-dialog/index.ts
 create mode 100644 src/app/shared/utils/shuffle.spec.ts

diff --git a/CLAUDE.md b/CLAUDE.md
index d69bbaf..458045c 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -87,8 +87,8 @@ Decomposed into a container component, presentational children, and three signal
 - **`VocabularyExercisesWordListComponent`** - the presentational list screen. Receives the container's shared dataSource/selection/signals as inputs and forwards user intents as outputs; wires its template's paginator/sort onto the shared dataSource via `@ViewChild` setters.
 - **Signal stores** - `ReviewSessionStore` (queue, cursor, auto-mode interval, per-word `ratingMap`, progress computeds), `SpellingSessionStore` (queue, per-letter reveal state, results), and `QuizSessionStore` (single-choice question queue, per-question answer state, results). Plain `@Injectable()` classes (no state library), provided in the container's `providers` so the container and session screens share one instance per page instance. They are imported directly, not via the barrel.
 - **Session screens** - `review-session`, `spelling-session`, `spelling-result`, `quiz-session`, and `quiz-result` components inject their store directly (no state inputs) and each registers a `document:keyup` `@HostListener`, so keystroke handling only lives while that screen is mounted.
-- **Dialogs** - one mode-driven select dialog (By Count / Free Selection / By Word), plus `reviewoptions`, `spellingoptions`, `worksheetoptions`, `quizoptions`, `word-filter`, and `rating-filter` dialogs. Filter dialogs clone their seed conditions so Cancel cannot mutate them; options dialogs round-trip `currentSettings` so reopening shows the last picks.
-- **Filter pipeline** - free-text + word conditions + rating conditions combine into a `VocabularyListFilter` (`interfaces/vocabulary.ts`), serialized as JSON into `MatTableDataSource.filter`; the row predicate delegates to the pure `matchVocabularyListFilter()` (closing over the rating map). After async rating loads, re-assign `dataSource.filter = dataSource.filter` to force re-filtering.
+- **Dialogs** - one mode-driven select dialog (By Count / Free Selection / By Word), plus `reviewoptions`, `spellingoptions`, `worksheetoptions`, `quizoptions`, and the **shared** `filter` dialog (`src/app/shared/filter-dialog/` — `SharedFilterDialogComponent`, design in `docs/reusable-filter-dialog-design.md`), opened with the page's `VOCABULARY_FILTER_PROPERTIES` schema and an actslib `IFilterDefinition` seed; Submit returns the edited definition, Cancel/backdrop/Esc return `undefined`. It is a project-wide component (all four list pages — vocabulary, knowledge, Chinese and translate — now filter through it, each with its own `*_FILTER_PROPERTIES` schema), not a vocabulary-page file. Options dialogs round-trip `currentSettings` so reopening shows the last picks.
+- **Filter pipeline** - free-text + the actslib **`IFilterDefinition`** (word/rating conditions in AND/OR-joined, nestable groups, produced directly by the shared dialog — no page-side tree model or translation step) combine into a `VocabularyListFilter` (`interfaces/vocabulary.ts`), serialized as JSON into `MatTableDataSource.filter`; the row predicate delegates to the pure `matchVocabularyListFilter()` (closing over the rating map), which runs `FilterUtility.MatchFilter` against a case-folded target `{ enword, cnword, rating }` (string condition values are folded by each property's `prepareValue` at dialog emit time; free-text stays a hand-written cross-field check). After async rating loads, re-assign `dataSource.filter = dataSource.filter` to force re-filtering.
 - **Ratings** - list ratings live in a `contentRatingMap` signal; the review store captures only server-confirmed ratings and returns them on `quit()`, which the container merges back into the map. Temporary (uploaded) content gets a synthetic `LearningContent` with a negative id, and rating calls are disabled for it.
 - **Quiz exercise** - the Exercises-menu Quiz item reuses the shared word-queue selection (table selection, else filter + `prepareWordQueue`), then builds single-choice questions via the pure `buildVocabularyQuizQuestions()` (`interfaces/vocabulary.ts`): EN word -> pick the CN explanation among 4 candidates (`en2cn`), or CN explanation -> pick the EN word (`cn2en`). Distractors come from the visible (filtered) rows, deduplicated by displayed text; questions that cannot gather one distinct alternative are skipped.
 
diff --git a/docs/knowledge-chinese-pages-review.md b/docs/knowledge-chinese-pages-review.md
new file mode 100644
index 0000000..b295289
--- /dev/null
+++ b/docs/knowledge-chinese-pages-review.md
@@ -0,0 +1,173 @@
+# Knowledge Exercises & Chinese Exercises Pages — Logic Review
+
+- **Date:** 2026-08-29
+- **Branch:** `feat/rating-unrated-semantics`
+- **Scope:** `src/app/pages/knowledge-exercises/**`, `src/app/pages/chinese-exercises/**`, and the
+  filter pipeline they share (`src/app/interfaces/knowledge-list-filter.ts`, `learnchinese.ts`,
+  `ui-common.ts` `matchRating`, `vocabulary.ts` `RatingCondition`).
+- **Method:** manual read of containers, list children, dialogs, converters; verified against the
+  installed `@angular/material` 21 source and real content data
+  (`knowledgebuilder-content/learnchinese/`); focused tests run via `ng test` (158 tests, 5 spec
+  files, all passing at review time).
+- **Re-verified:** 2026-08-29, after the knowledge filter-UI merge (Content/Rating dialogs → one
+  field-selecting filter dialog; filter fields aligned to table columns). Findings and line refs
+  refreshed against the current tree; full suite green (1808 tests / 75 spec files) and the
+  production build passes.
+- **Status legend:** each finding carries a status (`open` / `fixed` / `wontfix`) for tracing.
+
+---
+
+## Findings (real issues)
+
+### 1. [Chinese] Recite flow is a dead end — status: open
+
+- **Where:** `chinese-exercises.component.ts:590` (`onStart() {}`)
+- **What:** Exercises ▾ → Recite opens `ChineseExercisesOptionsDialogComponent`, collects
+  level/count/allowEmptyAnswer, then calls `onStart()` — an empty stub. Nothing happens.
+  `this.setting` (`ChineseReciteOption`) is write-only state.
+- **Origin:** pre-existing on `main` (the recite screen was removed earlier); the menu item and
+  dialog survived it.
+- **Suggestion:** remove the Recite menu item + options dialog + `setting`, or rewire the flow to
+  an actual target.
+
+### 2. [Chinese] Print options collected but silently ignored — status: open
+
+- **Where:** `chinese-exercises.component.ts:613-619` (copying dialog results) vs
+  `chinese-exercises.component.ts:658-667` (`onPrint` building `execPrintSetting`).
+- **What:** `onPrintWithOptions` stores `respectRetentionCurve`, `printExecDate`, `execDate`,
+  `printEntryDate` into `printSetting`, but `onPrint` builds a fresh `execPrintSetting` that
+  hardcodes `printEntryDate: true` and never reads the other three —
+  `KnowledgeExercisePrintOption` (`questionbank-base.ts:1374`) has no such fields. The dialog's
+  exec-date radio ("respect retention curve") has no effect.
+- **Origin:** pre-existing on `main`.
+- **Contrast:** the knowledge print dialog is fine — every option flows through
+  `this.printSetting` into `uiService.setSelectedExerciseItem`.
+- **Suggestion:** either extend `KnowledgeExercisePrintOption` and implement the retention/exec-date
+  behavior in the display/print renderer, or drop the dead controls from
+  `chinese-exercises-printoptions-dialog.html`.
+
+### 3. [Chinese] v2 multi-segment items print as "undefined" — status: open
+
+- **Where:** `learnchinese.ts:277-278` (`convertChineseReciteItemToKnowledge`, FillInTheBlank
+  branch): `qitem.question += item.content`.
+- **What:** multi-segment items (`contentlength > 0`, no `content` field) produce
+  `question = "<subject>, <author>. undefined"` and no answers. The Dictation branch loops
+  content1..content39; the FillInTheBlank branch does not.
+- **Data evidence:** 10 items in `knowledgebuilder-content/learnchinese/gaozhongchangshi.json`
+  (a version-2 file) have `contentlength` and no `content`; printing that file without a narrow
+  selection includes them.
+- **Origin:** pre-existing (the converter is unchanged on this branch), data-verified during this
+  review.
+- **Suggestion:** in the FillInTheBlank branch, fall back to the joined segments (same logic as
+  `getChineseReciteItemDisplayContent`) when `content` is absent.
+
+### 4. [Chinese] Filter cannot see multi-segment content — status: open
+
+- **Where:** `learnchinese.ts:90-91` (`chineseConditionFieldText`, `content` case) and
+  `learnchinese.ts:110-111` (free-text haystack) — both read `item.content` only.
+- **What:** the list column renders joined content1..N segments
+  (`getChineseReciteItemDisplayContent`), so users can see text that free text and the Content
+  condition cannot match. Affects the same 10 multi-segment items as finding 3.
+- **Origin:** introduced by this branch (the filter is new).
+- **Suggestion:** build the searchable content from the same joined-segments helper inside
+  `matchChineseListFilter`.
+
+### 5. [Both] Race: old file's rows can be rated under the new file's contentId — status: fixed (knowledge, 2026-08-29) / open (Chinese)
+
+- **Fix (knowledge):** `studyContentId` is now reset to 0 on file switch and only assigned in the
+  content `next` handler (after the token check), so clicks on the still-visible old rows hit the
+  `studyContentId <= 0` guard and are dropped; `getRatings` uses the local `contentId`. Regression
+  test: "should ignore rating clicks on stale rows while the new file is loading".
+
+- **Where:** `chinese-exercises.component.ts:340`, `knowledge-exercises.component.ts:361`
+  (`this.studyContentId = selectedContent.id` before content resolves).
+- **What:** on file switch, `studyContentId` is assigned immediately while the previous file's rows
+  stay visible until the new content's `next`/`error`. A rating click in that window upserts
+  `(newContentId, oldItemId)` — persisting a rating into the wrong file's namespace. The error path
+  clears rows but cannot recall the already-issued request.
+- **Probability:** narrow window (needs a slow content load plus a user click), but it is exactly
+  the failure class the error-path comments guard against.
+- **Suggestion:** keep `studyContentId = 0` until the content `next` arrives (or disable the rating
+  toggles while a load is in flight).
+
+### 6. [Both] Race: slow `getRatings` response can revert a fresh rating — status: fixed (knowledge, 2026-08-29) / open (Chinese)
+
+- **Fix (knowledge):** the `next` handler overlays both the current `contentRatingMap` (covers
+  already-saved clicks) and `pendingContentRatings` (covers in-flight clicks) on top of the fetched
+  server list before `contentRatingMap.set`. Regression test: "should keep locally applied ratings
+  when a stale getRatings response lands".
+
+- **Where:** `chinese-exercises.component.ts:389-395`, `knowledge-exercises.component.ts:408-425`
+  (the `getRatings` `next` handler rebuilding `contentRatingMap`).
+- **What:** if the initial `getRatings` fetch lands *after* an early `upsertRating` succeeded, the
+  map is rebuilt from the stale server list without the just-saved rating;
+  `pendingContentRatings` was already deleted on the upsert's success, so nothing re-applies it and
+  the toggle visually reverts to the stale server value.
+- **Suggestion:** in the `next` handler, re-apply any `pendingContentRatings` entries on top of the
+  fetched map before `contentRatingMap.set`.
+
+## Minor findings
+
+### 7. [Knowledge] Answer panel persists across prev/next — status: fixed (2026-08-29)
+
+- **Fix:** `onPreviousItem`/`onNextItem` now also reset `showDetailAnswer`, matching the hint-flag
+  handling. Regression test: "onNextItem/onPreviousItem should hide the previous item's answer
+  panel".
+
+`onPreviousItem`/`onNextItem` (`knowledge-exercises.component.ts:729-747`) reset the hint flags and
+markdown but not `showDetailAnswer`, so the next item's answer is shown without pressing Toggle
+Answer. Possibly intentional for studying; inconsistent with the hint handling either way.
+
+### 8. [Knowledge] `onPreviewCore` mutates cached source rows — status: fixed (2026-08-29)
+
+- **Fix:** the print queue is now built from shallow copies (`{ ...item, order }`, sub-items
+  copied too); the `LearningContentService`-cached row objects are no longer touched. Regression
+  test: "should renumber copies and leave the cached source rows untouched".
+
+`knowledge-exercises.component.ts:632-653` renumbers `item.order` on the row objects from
+`dataSource.data`, which are the `LearningContentService` per-fileUrl cached JSON objects — the
+mutation persists in the cache across visits. The Chinese flow correctly renumbers freshly
+converted copies (`convertChineseReciteItemToKnowledge` output) instead.
+
+### 9. [Both] IME composition vs live filtering — status: fixed (knowledge, 2026-08-29) / open (Chinese)
+
+- **Fix (knowledge):** the free-text input moved from `(keyup)` to `(input)` plus a
+  `compositionstart`/`compositionend` guard — pinyin fragments are suppressed and the final text is
+  emitted on compositionend (value read from the event target, no ngModel race). Regression test:
+  "should suppress live filtering during IME composition" (list spec).
+
+Free text applies on `(keyup)`; typing Chinese via an IME fires filtering for intermediate pinyin
+fragments. Composition-aware filtering (compositionstart/end guard or `(input)`-based) would be
+smoother — notable on a Chinese-content page.
+
+### 10. [Both] List state resets when returning from detail — status: fixed (knowledge, 2026-08-29) / open (Chinese)
+
+- **Fix (knowledge):** the list screen is no longer destroyed by the mode switch — the container
+  keeps it mounted and toggles it with `[hidden]`, rendering detail/extrainfo via `@if`. Paginator
+  page/size and sort state (and scroll position) now survive a detail round-trip for free; the
+  `appliedFreeText`/`selectionCount` seeds remain but only matter at first construction.
+  Regression test: "should keep the list screen mounted (hidden) during detail visits".
+
+Entering detail/extra-info destroys the list child (`@switch` in
+`knowledge-exercises.component.html`); returning re-creates paginator (page 0) and sort (none).
+Free text and selection survive by design (`appliedFreeText` seed + `selectionCount` seed), but
+page/sort do not. Cosmetic.
+
+## Verified non-issues (checked and found correct)
+
+- `dataSource.filter = this.dataSource.filter` self-assignment re-filter trick: safe on Material 21
+  — the setter publishes to a `BehaviorSubject` unconditionally (verified in
+  `@angular/material/fesm2022/table.mjs`).
+- Select dialogs (both pages): count/offset clamped as defense-in-depth; By-ID no-match paste can
+  neither close the dialog nor wipe the existing selection.
+- Dialog Cancel semantics: seed conditions cloned; `undefined` (Cancel/backdrop/Esc) leaves state
+  untouched.
+- Rating toggle deselect-restore (`event.value < 1` → restore group value) and stale-upsert
+  dropping via `pendingContentRatings` are sound.
+- Unrated-as-0 semantics: `matchRating` compares numerically; `< 1` matches unrated, `>= 1` matches
+  rated — consistent with the branch's design (`ui-common.ts`).
+- Knowledge Print button disabled on empty selection; detail prev/next buttons bounds-disabled.
+- Filter/selection survive list-child re-creation (free-text reseed, `selectionCount` seed).
+- Focused tests passing at review time: `ng test` — 158 tests / 5 spec files
+  (both page containers, `learnchinese.spec.ts`, `knowledge-list-filter.spec.ts`,
+  `ui-common.spec.ts`).
diff --git a/docs/reusable-filter-dialog-design.md b/docs/reusable-filter-dialog-design.md
new file mode 100644
index 0000000..2b489b7
--- /dev/null
+++ b/docs/reusable-filter-dialog-design.md
@@ -0,0 +1,598 @@
+# Design: Shared Filter Dialog (reusable condition-tree filter editor)
+
+Status: **implemented; vocabulary page migrated (Phase 1 + 2)** — the shared
+dialog lives in `src/app/shared/filter-dialog/` and the vocabulary page uses it
+(`VOCABULARY_FILTER_PROPERTIES` schema in `interfaces/vocabulary.ts`); the old
+`vocabulary-exercises-filter-dialog.*` files and the `VocabularyFilterGroup`
+model are deleted. Phases 3–5 (knowledge, Chinese, translate adoption) are
+pending. Implementation deltas from this doc, all deliberate:
+- the leaf holds **three value slots** (`single` / `between` / `choices`)
+  rather than the five named fields of §6.1;
+- the date editor is a native `<input type="date">` (no `matDatepicker`, so the
+  dialog needs no date-adapter providers);
+- summaries render **comparison symbols** (`>=`, `<`) for numeric/date
+  properties and word labels otherwise, keeping rating phrases compact;
+- the join word in summaries is **translated** (`common.joinAnd`/`joinOr`)
+  rather than hardcoded English, matching the localization-first rule.
+
+Author: Claude Code session 2026-08-30
+Base implementation: the (now deleted) vocabulary filter dialog, which this
+component generalizes and replaced.
+
+---
+
+## 1. Purpose & scope
+
+One project-wide dialog for defining list-page filters as a **condition tree**
+(SQL-WHERE shape: leaves = property conditions, inner nodes = AND/OR joins),
+covering all six exercise pages. The dialog is configured per page with a
+**property schema** whose operator set derives from actslib's filter semantics;
+its seed and result are actslib-native (`IFilterDefinition`), so pages store,
+translate-free, and evaluate exactly what the dialog returns.
+
+The name "Filter Dialog" (not "filter *options* dialog") avoids a collision
+with the existing options dialogs (`reviewoptions`, `spellingoptions`, …),
+which configure exercise options, not filters.
+
+### Goals
+
+1. **actslib-driven operators.** Each property's allowed operations are derived
+   from actslib (`FilterOperation` + the per-kind support matrix) and narrowed
+   by a per-page whitelist. Two special editor cases per the brief:
+   - **enum properties** render their value editor as a **multiple-choice list**
+     (checkboxes), compiled to actslib conditions on Submit (§7.3);
+   - **`Between`** renders **two inputs** (low + high) (§7.2).
+2. **mat-tree + detail-pane design**, matching the vocabulary dialog: tree
+   navigator (left), editor for the selected node (right), draggable splitter,
+   insert/delete toolbar, live expression preview, Submit gated by validation.
+3. **Replace, then unify**: first adopter is the vocabulary page (replacing
+   `VocabularyFilterGroup` + its bespoke dialog); the knowledge, Chinese and
+   translation pages' five legacy filter dialogs follow (§12).
+
+### Non-goals
+
+- The **free-text search box** stays on each page's filter bar (hand-written
+  cross-field matching; never enters the dialog).
+- **Where values come from** (row fields vs. the user's rating from
+  `contentRatingMap`) is the page's concern — pages keep evaluating against a
+  synthesized target.
+- No negation / NOT groups: actslib `FilterUtility` cannot express them.
+- No persistence of filter presets (in-memory per page, as today).
+
+---
+
+## 2. Current state (what gets replaced)
+
+| Page | Dialog today | Model today | Notes |
+|---|---|---|---|
+| vocabulary | `vocabulary-exercises-filter-dialog` | tree (`VocabularyFilterGroup`), edited via bespoke node/row copies | **reference design**; tree + panel + validation already built |
+| knowledge-exercises | `knowledge-exercises-filter-dialog` | flat rows (`KnowledgeCondition[]` + `RatingCondition[]`), AND-only | **migrated** (shared dialog over `KNOWLEDGE_FILTER_PROPERTIES`; the `itemType` enum multi-select is §7.3's proof) |
+| chinese-exercises | `chinese-exercises-content-filter-dialog` + `-rating-filter-dialog` | flat condition lists | two dialogs → one — **migrated** (shared dialog over `CHINESE_FILTER_PROPERTIES`) |
+| translate-exercises | `translate-exercises-word-filter-dialog` + `-rating-filter-dialog` | flat `SentenceCondition[]` + `RatingCondition[]` | two dialogs → one — **migrated** (shared dialog over `SENTENCE_FILTER_PROPERTIES`) |
+
+Common shape: each page hardcodes its field union (`'enword' | 'cnword' |
+'rating'`…), its operator list, its row editor template, and a translation
+function to actslib. All of that becomes the **property schema** input; the
+dialog owns tree editing, validation, and the `IFilterDefinition` I/O.
+
+---
+
+## 3. Design decisions at a glance
+
+| # | Decision | Rationale |
+|---|---|---|
+| D1 | Seed + result are **actslib `IFilterDefinition`** | Pages already evaluate it (`FilterUtility.MatchFilter`); kills every page-specific dialog model and the `VocabularyFilterGroup` ↔ definition translation. The dialog is generic precisely because its I/O is the evaluator's language. |
+| D2 | **Property schema** passed via `MAT_DIALOG_DATA`, operators defaulted per kind from actslib's matrix, narrowed by whitelist | "allowed options per property" without every page re-listing `>`/`>=`/… ; whitelist still controls what's *offered* (e.g. rating offers only `=`). |
+| D3 | Enum multi-select compiles to **one leaf that emits an OR-of-`Equal` group**; seeds fold back | actslib has no `In` operation; OR-of-equals is the only faithful encoding, and `enumValues` per condition keeps actslib's enum validation. Fold-back keeps round-trips editable (§7.3). |
+| D4 | Valueless custom operators via **`customOperators` hook** (`emit` + `recognize`) | Vocabulary's `isPhrase` (→ `Contains ' '`) is app semantics actslib can't express; the hook keeps the dialog reusable without hardcoding word knowledge (§7.4). |
+| D5 | Keep the vocabulary editor-state pattern: numeric-id nodes, **reference `trackBy`**, **id `expansionKey`**, all edits **immutable through the root signal** | These are load-bearing CDK facts, not style choices (see §6.3 and the bug history); encoding them in the shared component prevents re-introducing them page by page. |
+| D6 | `prepareValue?` hook per property for case-folding / trimming | actslib string comparison is case-sensitive; the vocabulary page lowercases folded values *and* folded row fields. Keeping the hook on the property lets the page decide match semantics while the dialog stays content-agnostic (§8.4). |
+| D7 | Validation rules move into the dialog model, same contract as today: blank/missing values and non-branching nested groups block Submit; root exempt | Just implemented in the vocabulary dialog; promoted verbatim to shared code (§9). |
+
+---
+
+## 4. Component overview
+
+```
+src/app/shared/filter-dialog/
+├── index.ts                          # public surface barrel
+├── filter-dialog.component.ts        # dialog shell (MAT_DIALOG_DATA consumer)
+├── filter-dialog.component.html      # mat-tree + splitter + detail pane
+├── filter-dialog.component.scss      # copied from the vocabulary dialog
+├── filter-dialog.component.spec.ts   # DOM tests
+├── filter-dialog-model.ts            # editor types + ALL pure logic (seed,
+│                                     # mutate, validation, emit, summarize)
+└── filter-dialog-model.spec.ts       # pure-function tests (no Angular)
+```
+
+- `SharedFilterDialogComponent`, selector `app-filter-dlg`, standalone,
+  `OnPush`, template/SCSS imported per project conventions.
+- **All tree logic lives in `filter-dialog-model.ts` as pure functions over
+  plain objects** (the vocabulary component's private methods promoted to
+  module functions taking explicit args). The component is then thin: hold the
+  `root`/`selectedId` signals, call model functions, wire the template. This
+  makes the interesting logic testable without `TestBed` and reusable for a
+  future flat-mode variant.
+- Imports: `MatTree`/`MatNestedTreeNode`/`MatTreeNodeDef`/`MatTreeNodeOutlet`,
+  `FormsModule`, Material form fields/select/checkbox-list, `TranslocoModule`.
+- Naming: types are `Shared…` (prefix `FilterDialog…`) to avoid clashing with
+  the per-page `KnowledgeFilterDialogRow` etc. during the migration window.
+
+## 5. Public contract
+
+```ts
+import type { EnumLike, FilterOperation } from 'actslib';
+import type { IFilterCondition, IFilterDefinition } from 'actslib';
+
+/** What kind of values a property carries. Drives the default operator list
+ *  (§5.2), the value editor (§7), and the seed/emit dispatch. */
+export type FilterPropertyKind = 'string' | 'number' | 'date' | 'enum';
+
+/** One choice of an enum property's multiple-choice editor. */
+export interface FilterEnumChoice {
+  value: string | number;
+  labelKey: string;          // i18n key, translated by the dialog
+}
+
+/** A valueless, app-specific operator (e.g. vocabulary 'isPhrase'). The page
+ *  supplies the actslib encoding and the fold-back recognizer. */
+export interface FilterCustomOperator {
+  /** editor-local id, never crosses the dialog boundary */
+  id: string;
+  labelKey: string;
+  /** actslib condition this operator emits on Submit */
+  emit(property: string): IFilterCondition;
+  /** true when `condition` is one of this operator's emissions (seed fold-back) */
+  recognize(condition: IFilterCondition): boolean;
+}
+
+/** One filterable property of the page's target shape. */
+export interface FilterableProperty {
+  /** actslib condition property name (matched against the evaluated target) */
+  key: string;
+  labelKey: string;
+  kind: FilterPropertyKind;
+  /** offered operators; default = per-kind actslib set (§5.2), ∩ when given. */
+  operations?: FilterOperation[];
+  /** kind 'enum': actslib enum validation, passed through to each condition. */
+  enumValues?: EnumLike;
+  /** kind 'enum': choices rendered as the multiple-value editor (§7.3). */
+  choices?: FilterEnumChoice[];
+  /** valueless operators appended to the operator select (§7.4). */
+  customOperators?: FilterCustomOperator[];
+  /** number/date editors: input constraints (ui only; not enforced on text input). */
+  numberRange?: { min?: number; max?: number };
+  /** transforms the raw editor value before it is emitted (D6: trim + lowercase). */
+  prepareValue?: (value: string | number) => string | number;
+}
+
+export interface FilterDialogData {
+  properties: FilterableProperty[];
+  /** seed = the filter currently in effect; empty/undefined starts blank */
+  root?: IFilterDefinition;
+  /** deepest group level the toolbar offers; default 4 */
+  maxDepth?: number;
+  /** dialog title key; default 'common.editFilter' */
+  titleKey?: string;
+}
+
+export interface FilterDialogResult {
+  root: IFilterDefinition;
+}
+```
+
+The **uniform close contract is unchanged**: Submit → `{ root }`;
+Cancel/backdrop/Esc → `undefined` (caller leaves state untouched).
+
+### 5.1 Operator derivation from actslib
+
+actslib's support matrix (FilterUtility docs + `MatchCondition`):
+
+| kind | default operators (actslib order) |
+|---|---|
+| `string` | `BeginsWith`, `Contains`, `Equal`, `EndsWith`, `>` `>=` `<` `<=` (lexicographic), `Between` |
+| `number` | `>`, `>=`, `=`, `<=`, `<`, `Between` |
+| `date`   | same as `number` (actslib detects dates at runtime) |
+| `enum`   | `Equal` only at the *leaf* level (multi-choice compiles to OR-of-`Equal`; §7.3) |
+
+Rules:
+
+- The dialog offers `customOperators` **in addition** to the (whitelist-narrowed)
+  default list — `hasValue: false` by definition (they encode the value).
+- Ordering follows the table above (familiar → exotic); pages that care pass
+  an explicit `operations` list, which also fixes order.
+- A property whose effective operator list is empty is a schema bug: dev-mode
+  `console.warn`, property skipped in the select.
+
+### 5.2 Per-page schema examples
+
+```ts
+// vocabulary page (the migration's first target)
+const VOCABULARY_FILTER_PROPERTIES: FilterableProperty[] = [
+  { key: 'enword', labelKey: 'vocabularyExercises.word', kind: 'string',
+    operations: [BeginsWith, Contains, Equal, EndsWith],
+    customOperators: [IS_PHRASE],          // emit: Contains ' '; recognize: op=Contains && lowValue=' '
+    prepareValue: v => String(v).trim().toLowerCase() },
+  { key: 'cnword', labelKey: 'chinese', kind: 'string',
+    operations: [BeginsWith, Contains, Equal, EndsWith],
+    prepareValue: v => String(v).trim().toLowerCase() },
+  { key: 'rating', labelKey: 'rating', kind: 'number',
+    operations: [GreaterThan, LargerOrEquals /* >= */, Equal, LessOrEquals, LessThan],
+    numberRange: { min: 0, max: 5 } },
+];
+```
+
+(The rating property replaces today's hand-mapped `RatingOperatorEnum`: the
+dialog works in actslib ops directly; `matchRating` stays for legacy paths
+until phase 4.)
+
+## 6. Editor state model
+
+### 6.1 Types
+
+```ts
+/** One editable leaf. All value kinds COEXIST (today's VocabularyFilterDialogRow
+ *  pattern): switching property/operator never loses input, and the template
+ *  only shows the controls the current dispatch selects. */
+export interface SharedFilterDialogLeaf {
+  id: number;
+  propertyKey: string;
+  /** a FilterOperation value, or a customOperator id */
+  operator: string;
+  textValue: string;                       // string editor
+  numberValue: number | null;              // number/date single-value editor
+  lowValue: number | null;                 // Between bounds
+  highValue: number | null;
+  selectedChoices: (string | number)[];    // enum editor (§7.3)
+}
+
+export interface SharedFilterDialogNode {
+  id: number;
+  join: FilterJoinType;
+  members: Array<SharedFilterDialogLeaf | SharedFilterDialogNode>;
+}
+```
+
+### 6.2 Pure functions in `filter-dialog-model.ts`
+
+| function | role |
+|---|---|
+| `seedTree(def: IFilterDefinition \| undefined, schema): SharedFilterDialogNode` | copy-in: conditions → leaves (fold-back: custom `recognize`, Between, enum OR-of-equals → one multi-choice leaf, single value); nested groups → nodes; **structure preserved at any depth**; never mutates the caller's def |
+| `emitTree(root, schema): IFilterDefinition` | Submit output: leaves → conditions/groups (§7 dispatch); drops nothing (validation already guarantees completeness); root may emit `conditions: []` (= match-all = cleared filter) |
+| `insertMember / deleteMember / patchNode / patchLeaf` | the vocabulary `mutateNode`/`replaceRow` immutables, generalized: every edit returns a new object along the mutation path |
+| `emptyLeaf(schema): SharedFilterDialogLeaf` | new row = first property, its first operator, blank values |
+| `validateTree(root, schema): ValidationState` | `hasMissingValue` + `invalidGroupIds` (§9) |
+| `summarizeFilterDefinition(def, schema, labels): string` | preview + menu label (parenthesized notation, per-group join, choice lists as `a/b/c`, Between as `low ≤ x ≤ high`); mirrors today's `summarizeVocabularyFilterTree` |
+
+`patchLeaf` replaces a leaf by id inside its parent (same `parentIdOf` +
+`members.map` trick as the vocabulary dialog).
+
+### 6.3 The CDK tree invariants (load-bearing — do not "simplify")
+
+Proven twice in the vocabulary dialog's bug history; the shared component must
+carry them forward verbatim:
+
+1. **`[trackBy]` = object reference** (`(_i, m) => m`). CdkTree's nested nodes
+   read their children *once* at view creation; its differ defaults trackBy to
+   the expansion key. An id-keyed differ therefore "keeps" mutated (replaced)
+   nodes whose views render stale children forever. Reference keys make every
+   immutable replacement re-create the affected views.
+2. **`[expansionKey]` = node id** + `[isExpanded]="true"` per
+   `mat-nested-tree-node` — always-expanded navigator that survives view
+   re-creation (expansion model keyed by id; recreated groups stay open).
+3. **Every edit flows through the root signal** (`root.update(...)`); nothing
+   mutates editor objects in place. The dialog is OnPush: an in-place write
+   (e.g. `[(ngModel)]="leaf.textValue"`) dirties no signal, so tree labels and
+   the preview show stale values. All detail-pane bindings are
+   `[ngModel]` + `(ngModelChange)` → patch handlers.
+4. `treeData = computed(() => [root()])` as `[dataSource]` — one top-level row
+   (the root node); member ids are unique editor-local counters.
+
+## 7. Value editors (detail pane), by dispatch
+
+The detail pane's **property select** drives everything: picking a property
+swaps the operator select contents (per §5.1) and the **value editor** below.
+Dispatch table:
+
+| effective editor | condition | controls |
+|---|---|---|
+| text | `kind: string`, valued operator | `matInput` (single) |
+| number | `kind: number`, single-value operator | `matInput type=number` with `numberRange` |
+| date | `kind: date`, single-value operator | datepicker (`MatDatepickerModule`, `date-fns` adapter per project convention) |
+| **between** | any valued kind, `operation = Between` | **two inputs** (low, high) — §7.2 |
+| **enum choices** | `kind: enum` (operator fixed to `Equal`) | **multiple-choice checkbox list** — §7.3 |
+| custom (valueless) | `operator ∈ customOperators` | none ("this needs no value" hint row) |
+
+### 7.1 State co-location
+
+All five value fields live on the leaf (§6.1) and keep their values across
+switches (the user's phrase→contains→phrase round-trip must not lose typed
+text). `emitTree` reads only the one field the dispatch selects — the others
+are discarded, mirroring the existing dialog.
+
+### 7.2 Between
+
+- Two inputs (`lowValue`, `highValue`); actslib `Between` is **inclusive on
+  both bounds** and examines both.
+- Validation: both filled; `low <= high` (numeric and date compare; string
+  Between compares lexicographically per actslib — allowed, no extra rule).
+- Emit: `{ property, operation: Between, lowValue, highValue }` (+
+  `enumValues` passthrough if the property has it).
+- Seed fold-back: a condition with `operation === Between` populates
+  `lowValue`/`highValue` directly (no group involved).
+
+### 7.3 Enum: multiple-choice (the first special case)
+
+The leaf for a `kind: 'enum'` property offers `choices[]` as checkboxes
+(`MatSelectionList`+`MatCheckbox` or a checkbox group; label =
+`t(labelKey)`); its operator select shows `Equal` (disabled select — operator
+is implied by the kind).
+
+**Emit (Submit):**
+
+- 1 value chosen → single condition
+  `{ property, operation: Equal, lowValue: v, enumValues }`
+- N > 1 values → a nested group
+  `{ join: OR, conditions: [ {Equal, v₁, enumValues}, …, {Equal, vₙ, enumValues} ] }`
+- 0 values → **invalid** (§9: enum leaf must pick at least one). There is no
+  "inactive" escape: an all-empty tree is the way to clear the filter.
+
+Rationale: actslib has no `In` operation; OR-of-`Equal` is the only faithful
+encoding of "row's enum value ∈ chosen set", and attaching `enumValues` to
+each condition reuses actslib's enum validation (non-members never match).
+
+**Seed fold-back:** when `seedTree` meets an **OR group whose every member is**
+`Equal` **on the same enum property**, it collapses it into ONE multi-choice
+leaf (values = the `lowValue`s). The fold is deliberately strict (direct
+members, all-`Equal`, same property) so hand-built or legacy definitions that
+don't match stay editable as an OR group of word-level `Equal` leaves against…
+nothing — the enum editor's operator select only offers `Equal`, so such
+groups seed into leaves with the property's editor anyway; a lone
+`Equal v` on an enum property seeds to the same leaf with `[v]` checked.
+
+Consequence: the knowledge page's existing
+`KnowledgeItemTypeCondition { field: 'itemType', itemTypes: [] }` maps 1:1 to
+the enum leaf (its emit/fold round-trip is lossless for the
+`itemTypes → OR-of-Equal` shape the page already evaluates by `includes`).
+
+### 7.4 Custom (valueless) operators — `isPhrase`
+
+`FilterCustomOperator.recognize` runs first during seed fold-back, so
+`Contains ' '` on a property that declares the `isPhrase` custom op folds back
+into that custom leaf (today's behavior, where `isPhrase` is stored natively
+in `VocabularyCondition`). The `emit()` runs on Submit. `prepareValue` is
+*skipped* for custom operators (they own their value). The recognizer must be
+unambiguous — pages that also offer literal `' '` contains (none today) would
+lose that distinction; documented as the hook's contract.
+
+## 8. UI layout (follows the vocabulary dialog)
+
+```
+┌───────────────────────────── title: t(titleKey) ─────────────────────────────┐
+│ ┌─ tree pane (splitLeft%) ──────┐ │ ┌─ detail pane (rest) ──────────────────┐ │
+│ │ [+cond] [+group] [delete]    │ │ │ (group → join select + hint)          │ │
+│ │ ─────────────────────────────│ │ │ (leaf  → property select             │ │
+│ │ ▾ mat-tree, always expanded  │ │ │          operator select              │ │
+│ │   rows: icon + label +       │◄┼►│          value editor per §7)         │ │
+│ │   invalid ⚠ icon             │ │ │                                       │ │
+│ │   (draggable splitter)       │ │ │                                       │ │
+│ └──────────────────────────────┘ │ └───────────────────────────────────────┘ │
+│ preview:  <label>  word starts app AND (chinese contains 派 OR rating ≥3)    │
+│                                                    [Cancel]  [Submit]         │
+└──────────────────────────────────────────────────────────────────────────────┘
+```
+
+- Grid `splitLeft% / 8px splitter / 1fr`, 25–65 clamp, pointer + keyboard
+  resize, stacked panes below ~720px — all copied from the vocabulary dialog
+  (SCSS moves nearly verbatim; the `filter-` prefixes become `fdlg-` to read
+  well outside the vocabulary page).
+- Tree row label via `summarizeFilterDefinition`'s leaf renderer (`nodeLabel`):
+  `"<property> <op> <value>"`, enum leaves `"<property> a/b"`, Between
+  `"<property> 2≤x≤4"`, custom `"<property> <opLabel>"`.
+- **Live preview**: same function, uncapped; menu labels on pages call it with
+  their own cap (40 chars, ellipsis) — the summarize helper lives in the model
+  file so both use one implementation.
+- Toolbar: insert condition / insert group (depth-capped) / delete selected —
+  identical targets/semantics as today.
+- The whole thing sits in `mat-dialog` with the existing sizing conventions
+  (`docs/material-dialog-sizing.md`).
+
+### 8.1 Selection & keyboard
+
+Unchanged from the vocabulary dialog: click or `(activation)` selects;
+selection is id-based (`selectedId` signal) so immutable replacements don't
+drop it; root preselected.
+
+## 9. Validation (Submit gate)
+
+`validateTree` returns per-leaf "missing value" flags + `invalidGroupIds`
+(nested groups with `< 2` members; **root exempt**: 0 = clear-filter, 1 =
+single-condition filter). A leaf is missing its value when the dispatch
+selects an input and it is blank (`textValue.trim() === ''`,
+`numberValue/dateValue == null`, any Between bound null,
+`selectedChoices.length === 0`), or when Between has `low > high`.
+
+- **Submit button** `[disabled]="!canSubmit()"` — the rule from the vocabulary
+  session: `canSubmit = noMissingValue && noInvalidGroups`.
+- Offending rows get the invalid class + `error` icon (tree), and the detail
+  pane shows the matching hint below the offending control; group hints reuse
+  `vocabularyExercises.filterGroupNeedsTwo`… → promoted to
+  `common.filterGroupNeedsTwo` (§11).
+- **No silent pruning on Submit** (today's `nodeToGroup` drops empty groups):
+  validation prevents submitting one, so `emitTree` becomes total and the
+  "empty group would match everything" hazard is blocked at the gate instead
+  of cleaned up afterwards. `Cancel` still mutates nothing.
+- `maxDepth` disables "+ group" at the deepest level (default 4), same as
+  `VOCABULARY_FILTER_DIALOG_MAX_DEPTH` today.
+
+## 10. Evaluation contract (page side)
+
+Pages apply the result like the vocabulary page does today:
+
+```ts
+onDefineFilter(): void {
+  this.dialog.open(SharedFilterDialogComponent, {
+    data: { properties: PAGE_FILTER_PROPERTIES, root: this.filterDefinition() },
+    width: '880px',
+  }).afterClosed().pipe(takeUntilDestroyed(this.destroyRef))
+    .subscribe(result => {
+      if (result) { this.filterDefinition.set(result.root); this.applyCurrentFilter(); }
+    });
+}
+```
+
+The page's matcher is `FilterUtility.MatchFilter(target, definition)` with the
+target carrying the evaluated fields — including the **per-user rating**
+(`{ ...foldedRowFields, rating }`). `prepareValue` (D6) is invoked by the
+dialog at emit time, so the definition the page stores already carries
+case-folded string values (vocabulary's `enword`/`cnword` lowercasing).
+
+## 11. i18n
+
+- Reuse root `submit`/`cancel`, `common.joinAnd/joinOr`,
+  `common.editFilter`, `common.addCondition`,
+  `vocabularyExercises.filterJoinHint/filterJoinSelect/filterPreview/
+  filterPreviewEmpty/filterDetailEmpty/filterSplitter` — **all these move to
+  `common.*`** (one owner; the vocabulary keys stay as aliases during the
+  migration and are removed in phase 4).
+- New keys: `common.filterGroupNeedsTwo` (promoted), `common.opBetween`
+  ("Between" / "介于"), `common.filterNeedsValue` (per-editor hint),
+  `common.filterEnumNeedsChoice`, `common.filterEnumNoValueHint` (custom op
+  hint), date picker keys (existing datepicker i18n via date-fns adapter).
+- Operator labels for `FilterOperation` values need a shared
+  `opLabel(op)` — the per-page `common.op*` keys already cover all of them
+  (`opStartsWith`, `opContains`, …, `opLessThan`); a tiny
+  `FILTER_OPERATION_LABEL_KEYS: Record<FilterOperation, string>` map lives in
+  the model file.
+- Property labels and enum choice labels are supplied by the schema (page's
+  responsibility), so no new keys beyond the above.
+
+## 12. Migration plan
+
+**Phase 1 — build.** Shared dialog + model + specs (§13). No page touched.
+Estimate: mostly *move*, not *write* — the vocabulary dialog's template/SCSS/
+model functions generalize with the property-schema dispatch.
+
+**Phase 2 — vocabulary adopts (proof).**
+- `filterTree: VocabularyFilterGroup` → `filterDefinition: IFilterDefinition`.
+- Delete `vocabulary-exercises-filter-dialog.*` and `VocabularyFilterGroup`,
+  `toVocabularyFilterDefinition`, `summarizeVocabularyFilterTree`;
+  `matchVocabularyListFilter` keeps its signature but the tree part becomes
+  `FilterUtility.MatchFilter(foldedTarget, filter.root)` (values are already
+  folded via `prepareValue`, so the predicate's fold of `enword`/`cnword`
+  fields stays).
+- Page filter bar's menu label switches to `summarizeFilterDefinition`.
+- The worksheet/quiz/queue paths consume `getVisibleData()` unchanged (they
+  never read the tree shape).
+- Update `docs/vocabulary-exercises-architecture.md` §7.3/§8 to point here.
+
+**Phase 3 — knowledge adopts (the enum proof).** Replace
+`knowledge-exercises-filter-dialog` + the flat `KnowledgeListFilter` tree part
+with one `IFilterDefinition` (`id`/`tags` string props, `itemType` enum with
+`choices` from `getAllQuestionBankTypes()` + `QuestionBankTypeEnum` labels,
+`rating` number). `matchKnowledgeListFilter` collapses to freeText-multi-term
+AND `MatchFilter`. (D3/D7 get their real-world validation here — the
+itemType multi-select existed as flat-AND before; now it also nests.)
+
+*Status:* landed — `KNOWLEDGE_FILTER_PROPERTIES` (id/tags string + itemType
+enum, `enumValues: QuestionBankTypeEnum`, choices labeled with the table's own
+`getQuestionBankTypeDescription` strings + rating 0–5); the dialog deleted and
+`matchKnowledgeListFilter` runs the multi-term freeText AND
+`FilterUtility.MatchFilter` over a `{ id, itemType, tags, rating }` target
+(text fields folded, itemType raw for enum validation).
+
+**Phase 4 — chinese + translate.** Content filter and both rating filters
+merge into one dialog per page (rating becomes just another property:
+`kind: number`, ops `= > >= < <=`). Delete
+`{chinese,translate}-exercises-*-filter-dialog.*`; drop `RatingCondition` /
+`RatingOperatorEnum` from `ui-common.ts` once no hand-written matcher uses
+them (`matchRating` retires with its last caller); bump app version
+(`/bump-version`) at each adopter's landing.
+
+*Status:* both landed. Chinese: subject/author/content (`string`, shape-match
+whitelist, `prepareValue` fold) + rating (`number`, 0–5, unrated = 0) in one
+`CHINESE_FILTER_PROPERTIES` schema. Translate: ensent/cnsent (`string`, same
+fold) + rating in `SENTENCE_FILTER_PROPERTIES` (label key `english` — a new
+top-level i18n key, the old dialog rendered the raw key). All four legacy
+dialogs deleted; both page predicates delegate to `FilterUtility`; the two
+menus per page collapsed into one Filter ▾. With no hand-written matcher left,
+`RatingOperatorEnum`/`RatingCondition`/`matchRating`/`summarizeRatingFilter`/
+`getRatingOperatorName` are now retired from `ui-common.ts`. All four pages'
+rating whitelists carry the full numeric set including `Between` (inclusive
+both bounds) — the legacy dialogs never offered it, the shared editor does.
+
+**Phase 5 — doc + cleanup sweep.** Remove `common.*` aliases the old dialogs
+needed, update CLAUDE.md's dialog list.
+
+## 13. Testing strategy
+
+`filter-dialog-model.spec.ts` (pure, the bulk of the value):
+
+- seed fold-back: custom-ops, Between, OR-of-`Equal`→multi-choice, mixed
+  nesting depth preserved, caller's def never mutated;
+- emit: every dispatch row of §7, `prepareValue` applied (incl. skipped for
+  custom ops), enum 0/1/N behavior, empty root → `conditions: []`;
+- round-trip: `emitTree(seedTree(emitTree(seed))) === emitTree(seed)` for
+  representative trees (the vocabulary spec's round-trip tests promoted);
+- `validateTree` matrix; `summarize` (parens, cap, choice/between rendering).
+
+`filter-dialog.component.spec.ts` (DOM, `TestBed` with the mocked-Transloco
+harness the vocabulary spec established):
+
+- tree refreshes after toolbar inserts/deletes (reference-trackBy guard);
+- **join/operator/value edits flow through the signal** — assert
+  `root()` identity changed (guards the OnPush staleness class of bug; note
+  `fixture.detectChanges()` checks the whole tree and *masks* staleness, so
+  the identity assertion is the real guard);
+- enum editor renders checkboxes from schema, multi-select emits OR group
+  (drive the real DOM), fold-back keeps the checkboxes checked;
+- Between shows two inputs, validates low≤high;
+- Submit disabled/enabled tracks `validateTree` live; invalid-group ⚠ icon;
+- schema dispatch: switching property switches operator list and editor;
+- depth cap hides +group; root never deletable; Cancel never mutates.
+
+Run via `ng test` (never `npx vitest` directly); single-file runs with
+concrete paths, not `**` globs (known builder gotcha).
+
+## 14. Risks & open issues
+
+| risk | mitigation |
+|---|---|
+| Fold-back ambiguity (`Contains ' '` = `isPhrase` or literal space?) | custom-op `recognize` runs first — the page's hook owns the interpretation; documented as its contract (§7.4). No page offers literal-space contains today. |
+| Enum OR-of-equals emits groups the "≥2 members" rule could later reject after folding | the *emitted* definition is evaluated, not re-validated; `validateTree` only sees editor leaves. Single-value enums emit bare conditions anyway. |
+| `prepareValue` double-folding (page also folds target fields) | the vocabulary page already folds both sides; the hook makes it explicit and single-sourced — page folds target, hook folds condition values, one rule each. |
+| actslib string ops are case-sensitive | D6: folded at emit; target folded in the predicate — mirrors today, documented per page. |
+| `date` kind has no current adopter | implemented in the dispatch table but untested against a page until one appears (spec covers the emit/seed path). Acceptable YAGNI line: kept because actslib supports dates natively and the cost is one editor case. |
+| Knowledge page's per-term free-text search stays hand-written | out of scope by design (non-goal); the dialog replaces only the structured condition part. |
+
+## 15. Explicitly deferred
+
+- Negation (`NOT`) — needs actslib `IFilterDefinition` support first.
+- `In` as a first-class actslib operation (would replace the OR-of-equals
+  encoding; the leaf model and UI would not change — only `emitTree`).
+- Saved filter presets / server-persisted per-user filters.
+- A flat (non-tree) "simple mode" for casual users — the tree handles single
+  conditions fine (root with one leaf).
+
+---
+
+## Appendix A — vocabulary `isPhrase` as a `FilterCustomOperator`
+
+```ts
+const IS_PHRASE: FilterCustomOperator = {
+  id: 'isPhrase',
+  labelKey: 'vocabularyExercises.wordOpIsPhrase',
+  emit: property => ({ property, operation: FilterOperation.Contains, lowValue: ' ' }),
+  recognize: c =>
+    c.operation === FilterOperation.Contains && c.lowValue === ' '
+};
+```
+
+## Appendix B — what is *not* reusable (stays per page)
+
+1. freeText box + its predicate (each page's haystack differs — e.g.
+   knowledge's multi-term recursive sub-item search);
+2. the evaluated-target synthesis (which row fields + rating go into the
+   object `MatchFilter` receives);
+3. the property schema itself (that's the configuration);
+4. the filter menu label cap and placement.
diff --git a/docs/vocabulary-exercises-architecture.md b/docs/vocabulary-exercises-architecture.md
index 0b49c61..9fb9a99 100644
--- a/docs/vocabulary-exercises-architecture.md
+++ b/docs/vocabulary-exercises-architecture.md
@@ -15,7 +15,7 @@ The decomposition targets four concerns:
 
 1. **One source of truth per concern.** The container owns cross-cutting state (file list, table data source, selection, rating map, applied filters, the active screen). Each study mode owns its own session state in a dedicated signal store. The list screen is purely presentational.
 2. **Screen isolation.** Exactly one screen is mounted at a time via `@switch`; session screens are created/destroyed on transition, so keyboard listeners and per-session subscriptions live only while their screen is mounted.
-3. **Pure, testable helpers.** All filtering, question building, and shuffle logic lives in pure exported functions (`interfaces/vocabulary.ts`, `shared/utils/shuffle.ts`) with no Angular dependencies, so they are unit-tested directly.
+3. **Pure, testable helpers.** All filtering and question building lives in pure exported functions (`interfaces/vocabulary.ts`), and shuffling comes from actslib (`FisherYatesShuffle`) — no Angular dependencies, so they are unit-tested directly. `shared/utils/shuffle.ts` retains only `pickWeighted` (weighted cloze distractor picks).
 4. **Round-trip-stable dialogs.** Options dialogs round-trip `currentSettings` so reopening shows the last picks; filter dialogs clone their seed so Cancel cannot mutate the caller's state.
 
 ---
@@ -31,10 +31,10 @@ VocabularyExercisesComponent (container)
 │   │
 │   ├─ 'list' (default) ─► VocabularyExercisesWordListComponent
 │   │                        inputs:  allFiles, selectedFile, dataSource, selection,
-│   │                                 contentRatings, ratingsEnabled, wordConditions,
-│   │                                 ratingConditions, appliedFreeText, isLoadingContents
-│   │                        outputs: fileSelectionChanged, freeTextChanged, defineWordFilter,
-│   │                                 clearWordFilter, defineRatingFilter, clearRatingFilter,
+│   │                                 contentRatings, ratingsEnabled, filterDefinition,
+│   │                                 appliedFreeText, isLoadingContents
+│   │                        outputs: fileSelectionChanged, freeTextChanged, defineFilter,
+│   │                                 clearFilter,
 │   │                                 quickSelect, allRowsToggled, contentRatingChanged,
 │   │                                 review, worksheet, spelling, quiz,
 │   │                                 downloadTemplate, addFileClick, tempFileSelected
@@ -65,8 +65,7 @@ VocabularyExercisesComponent (container)
     ├─ VocabularyExercisesSpellingOptionsDialogComponent
     ├─ VocabularyExercisesQuizOptionsDialogComponent
     ├─ VocabularyExercisesWorksheetOptionsDialogComponent
-    ├─ VocabularyExercisesWordFilterDialogComponent
-    └─ VocabularyExercisesRatingFilterDialogComponent
+    └─ SharedFilterDialogComponent (src/app/shared/filter-dialog, schema-driven)
 ```
 
 The container's `mode` signal is the screen router. It has six values:
@@ -118,8 +117,7 @@ The container is the single source of truth for cross-cutting state and the orch
 | `selection` | `SelectionModel<LearnEnglishWordFileItem>(true, [])` | Shared selection; read by both the word-list and queue prep. |
 | `contentRatingMap` | `signal(new Map<number, number>())` | Per-itemId rating for the loaded file. Replaced (not mutated) on every update so OnPush consumers see a new reference. |
 | `freeText` | `signal('')` | Live free-text filter term. |
-| `wordConditions` | `signal<WordCondition[]>([])` | ANDed word-match conditions from the Word filter dialog. |
-| `ratingConditions` | `signal<RatingCondition[]>([])` | ANDed rating conditions from the Rating filter dialog. |
+| `filterDefinition` | `signal<IFilterDefinition>` | The actslib condition definition from the shared filter dialog (word/rating leaves in AND/OR-joined groups); starts at `emptyVocabularyFilterDefinition()`. |
 | `listFilterCriteria` | `private VocabularyListFilter \| null` | Parsed form of the active filter; kept in sync with `dataSource.filter` so the row predicate does not `JSON.parse` per row. `null` = no filter. |
 | `studyContentId` | `number` | Backend `ContentId` of the loaded file. Temp uploads get a **negative** id, which disables every `studyContentId > 0` rating guard. |
 | `reviewSetting` / `spellingSetting` / `quizSetting` / `worksheetSetting` | option objects | Persisted settings round-tripped by the options dialogs. |
@@ -152,7 +150,7 @@ Shared by Review, Spelling, Worksheet, and Quiz. The contract: **explicit table
 private prepareWordQueue<T>(items: T[], options: VocabularyOptionCore): T[] {
   let queues = items;
   if (queues.length > options.countOfItems) {
-    queues = fisherYatesShuffle(queues);   // returns a NEW array; input not mutated
+    queues = FisherYatesShuffle(queues);   // actslib; returns a NEW array; input not mutated
     queues = queues.slice(0, options.countOfItems);
   }
   return queues;
@@ -350,15 +348,15 @@ Purely presentational. The container owns `dataSource`, `selection`, and the app
 
 ### 6.1 Inputs / outputs
 
-- **Inputs (required):** `allFiles`, `selectedFile` (two-way `model`), `isLoadingContents`, `dataSource`, `selection`, `contentRatings`, `wordConditions`, `ratingConditions`.
+- **Inputs (required):** `allFiles`, `selectedFile` (two-way `model`), `isLoadingContents`, `dataSource`, `selection`, `contentRatings`, `filterDefinition`.
 - **Input (defaulted):** `ratingsEnabled` (default `true`; disabled for temp content so the toggle group cannot latch a phantom value), `appliedFreeText` (default `''`; seeds the input box on init so a recreated screen shows the still-applied filter).
-- **Outputs:** file selection, free-text changes, define/clear word & rating filters, quick-select, all-rows-toggled, content-rating-changed, the four exercise intents (review/worksheet/spelling/quiz), download-template, add-file-click, temp-file-selected.
+- **Outputs:** file selection, free-text changes, define/clear filter, quick-select, all-rows-toggled, content-rating-changed, the four exercise intents (review/worksheet/spelling/quiz), download-template, add-file-click, temp-file-selected.
 
 ### 6.2 Filter bar
 
 The toolbar renders a Fiori-style filter bar:
-- a free-text `matInput` (live, `keyup` → `freeTextChanged.emit`);
-- Word and Rating `mat-menu` buttons whose labels are dynamic summaries: `wordMenuLabel` uses `summarizeWordFilter(...)` and `ratingMenuLabel` uses `summarizeRatingFilter(...)` (both pure helpers in `interfaces/vocabulary.ts`), falling back to a "new filter" label when no condition is active;
+- a free-text `matInput` (live, `input` → `freeTextChanged.emit`, suppressed mid-IME-composition via `compositionstart`/`compositionend` so pinyin fragments never flicker the table);
+- a single Filter `mat-menu` whose label is a dynamic summary of the condition definition: `filterMenuLabel` calls `summarizeFilterDefinition(...)` (from `shared/filter-dialog`, over `VOCABULARY_FILTER_PROPERTIES`), which renders conditions joined by each group's AND/OR with parentheses for multi-member sub-groups and `>=`-style symbols for numeric properties (e.g. `(word starts with a OR chinese contains 派) AND rating >= 3`), falling back to a "new filter" label when no condition exists; the menu's second item clears the whole definition;
 - a Quick Selection menu (Random / Sequence / Words → `quickSelect.emit('random'|'sequence'|'words')`);
 - an Exercises menu (Study / Print / Typing / Test);
 - a counts strip: total items · filtered rows · selected rows.
@@ -397,36 +395,42 @@ Four near-identical dialogs. Each seeds its `model()` fields from `data.currentS
 
 The worksheet dialog seeds `subTitle` from `currentSettings.subTitle ?? data.title` (a stored custom subtitle wins over the file name) and exposes `printEntryDate`, `printFirstLetter`, `uniformBlankLength`, `uniformBlankLengthSize` (default `DEFAULT_UNIFORM_BLANK_LENGTH`). It no longer carries any datepicker/radio machinery — that was dead code removed in the review.
 
-### 7.3 Filter dialogs — Word / Rating
+### 7.3 Filter dialog — now the shared `SharedFilterDialogComponent`
 
-Two multi-condition editors. Same Close/Cancel semantics: `Close` returns the edited list; `Cancel`/backdrop/Esc return `undefined` (caller leaves the previous filter untouched). The seed is **cloned** (`this.data.map(c => ({ ...c }))`) so an edit never mutates the caller's array before Close.
+The vocabulary page no longer owns a filter dialog. The Filter menu opens the project-wide **`SharedFilterDialogComponent`** (`src/app/shared/filter-dialog/` — design, contracts, and the CDK tree invariants are documented in `docs/reusable-filter-dialog-design.md`), configured with the page's schema `VOCABULARY_FILTER_PROPERTIES` (`interfaces/vocabulary.ts`):
 
-- **Word filter:** add/remove rows; each row picks an operator (`startsWith`/`contains`/`equal`/`endsWith`/`isPhrase`/`notPhrase`) and text. Phrase operators are textless and disable the text input. `hasEmptyCondition()` blocks Close when a text condition's text is blank.
-- **Rating filter:** add/remove rows; each row picks one of the 5 value-based operators (`>= > = <= <`) and a value 1–5.
+- `enword` / `cnword` — string properties with the four match operators (`BeginsWith`/`Contains`/`Equal`/`EndsWith`); emitted values are trimmed + lower-cased via each property's `prepareValue` hook. `isPhrase` survives as a **custom (valueless) operator**: it emits `Contains ' '` and folds back from it via `recognize`, so the phrase leaf stays editable across dialog round-trips. (A `notPhrase` variant was dropped: actslib `FilterUtility` has no negation.)
+- `rating` — a number property with the five comparison operators (`>= > = <= <`), 0–5 range. Rating is not a row field; the predicate passes it in the synthesized target (§8).
+
+Word and rating conditions mix freely in the same group — that's what makes cross-dimension OR (`word starts with a OR rating = 5`) expressible; groups nest to any depth (the dialog caps only how deep "+ group" goes, default 4 levels; the evaluator is unbounded). The dialog edits the actslib definition **natively**: seed = the definition in effect, Submit = `{ root: IFilterDefinition }`, `Cancel`/backdrop/Esc = `undefined` (caller keeps the previous filter). Validation gates Submit (missing values; nested groups must have ≥2 members, root exempt — invalid groups are flagged in the tree), the master/detail layout is `mat-tree` + splitter + detail editor with the enum multiple-choice and two-input Between editors, and every edit flows through the dialog's `root` signal. See the design doc for the full UI contract.
 
 ---
 
 ## 8. Filter pipeline
 
-All filtering decisions flow through one pure function — `matchVocabularyListFilter(item, rating, filter)` in `interfaces/vocabulary.ts` — and nothing else grows private matching logic.
+All filtering decisions flow through one pure function — `matchVocabularyListFilter(item, rating, filter)` in `interfaces/vocabulary.ts` — and nothing else grows private matching logic. The condition **definition** is an actslib `IFilterDefinition` produced directly by the shared filter dialog (no page-side translation step) and evaluated by `FilterUtility.MatchFilter`.
 
 ### 8.1 Composition
 
-The three filter dimensions combine into a single `VocabularyListFilter`:
+The filter bar combines two dimensions in a single `VocabularyListFilter`: a live `freeText` term and the structured actslib **definition** built by the shared dialog:
 
 ```ts
 interface VocabularyListFilter {
   freeText: string;            // cross-field substring over id/enword/cnword (legacy)
-  wordConditions: WordCondition[];   // ANDed; blank-text rows are inactive
-  ratingConditions: RatingCondition[]; // ANDed
+  root: IFilterDefinition;     // actslib condition definition (the dialog's result)
 }
+
+// IFilterDefinition (actslib): { join?: 'AND'|'OR'; conditions: (IFilterCondition | IFilterDefinition)[] }
+// IFilterCondition: { property; operation: FilterOperation; lowValue?; highValue?; enumValues? }
 ```
 
-Matching is `freeText AND every active word condition AND every rating condition`:
+Word and rating conditions mix freely in the same group, and groups nest to arbitrary depth (the dialog edits the definition directly, capping only how deep new groups can be added; the evaluator is fully recursive). Matching is `freeText AND definition`, per actslib's own semantics:
 
-- `freeText`: lowercased substring of `${id}${enword}${cnword}` (mirrors the old default `MatTableDataSource` predicate).
-- `wordConditions`: text operators compare lowercased `enword`; phrase operators match on shape (`isPhrase` = `enword` contains a space; `notPhrase` = the negation) and are always active.
-- `ratingConditions`: each delegated to `matchRating(rating, operator, value)` (`ui-common.ts`). An unrated word has rating `0` and is compared numerically like any other value, so `< 1` matches unrated words and `>= 1` matches any rated word (ratings are 1–5). The Rating filter dialog offers only the five value-based operators (`>=`, `>`, `=`, `<=`, `<`) with values 1–5; the former `HasAny`/`HasNone` operators were removed as redundant (`>= 1` ≡ HasAny, `< 1` ≡ HasNone).
+- `freeText`: lowercased substring of `${id}${enword}${cnword}` (mirrors the old default `MatTableDataSource` predicate). This is a cross-field concatenation with no per-property condition equivalent, so it stays hand-written in `matchVocabularyListFilter`.
+- `root`: evaluated by `FilterUtility.MatchFilter` against a case-folded target `{ enword, cnword, rating }` (the row's text fields lowercased). **String condition values are already folded** — the dialog applies each property's `prepareValue` (trim + lowercase) at emit time — so the matcher only folds the target's fields; both sides meet lower-cased despite FilterUtility's case-sensitive string comparisons. The rating comes from the page's rating map, not the row.
+  - Word conditions carry `BeginsWith`/`Contains`/`Equal`/`EndsWith` directly (they are actslib operations now, not a page enum). The textless `isPhrase` emits `Contains` of a space via the schema's custom-operator hook — always active, offered for the English word only.
+  - Rating conditions are plain numeric operations on the `rating` property (`>=`, `>`, `=`, `<=`, `<`). An unrated word has rating `0` and compares numerically like any other value — the same semantics as the shared `matchRating` (`ui-common.ts`, still used by the knowledge/Chinese/translate pages), so `< 1` matches unrated words and `>= 1` matches any rated word (ratings are 1–5; the former `HasAny`/`HasNone` operators were removed as redundant).
+  - **No empty leaves/groups reach the matcher:** the shared dialog's Submit validation requires every leaf to hold a value and every nested group to branch (≥2 members), and its emit step drops incomplete leaves and empty sub-groups, so a definition can never contain the always-match empty group that would silently turn an OR-joined parent true.
 
 ### 8.2 Wiring through `MatTableDataSource`
 
@@ -538,25 +542,30 @@ interface VocabularySelectOption {
 ### 10.5 Filter models
 
 ```ts
-type WordMatchOperator = 'startsWith' | 'contains' | 'equal' | 'endsWith' | 'isPhrase' | 'notPhrase';
-interface WordCondition   { operator: WordMatchOperator; text: string; }
-interface RatingCondition  { operator: RatingOperatorEnum; value: number; }
-interface VocabularyListFilter { freeText: string; wordConditions: WordCondition[]; ratingConditions: RatingCondition[]; }
+// actslib (shared filter dialog contract): IFilterDefinition / IFilterCondition /
+// FilterOperation / FilterJoinType — the vocabulary filter IS a definition now.
+// vocabulary.ts schema:
+interface FilterableProperty { key; labelKey; kind: 'string'|'number'|'date'|'enum';
+  operations?; enumValues?; choices?; customOperators?; numberRange?; prepareValue?; }
+const VOCABULARY_FILTER_PROPERTIES: FilterableProperty[]; // enword, cnword, rating
+const VOCABULARY_IS_PHRASE: FilterCustomOperator;          // Contains ' ' emit/recognize
+interface VocabularyListFilter { freeText: string; root: IFilterDefinition; }
 ```
 
-`RatingOperatorEnum` (`Equals`, `GreaterThan`, `LessThan`, `LargerOrEquals`, `LessOrEquals`) and `SelectionModeEnum` (`ByID`, `FreeSelection`, `ByCount`) live in `ui-common.ts`, alongside `matchRating()`, which compares an unrated (`0`) word numerically.
+`RatingOperatorEnum` (`Equals`, `GreaterThan`, `LessThan`, `LargerOrEquals`, `LessOrEquals`), `SelectionModeEnum` (`ByID`, `FreeSelection`, `ByCount`), `RatingCondition` and `summarizeRatingFilter()` live in `ui-common.ts` — they are shared by the vocabulary, knowledge, Chinese and translate list filters — alongside `matchRating()`, which compares an unrated (`0`) word numerically (the vocabulary page evaluates its rating conditions via actslib `FilterUtility` with the same semantics).
 
 ### 10.6 Pure helpers
 
 | Function | Location | Purpose |
 |---|---|---|
-| `matchVocabularyListFilter(item, rating, filter)` | `vocabulary.ts` | Single matching rule for the list filter. |
+| `matchVocabularyListFilter(item, rating, filter)` | `vocabulary.ts` | Single matching rule for the list filter (free text + actslib `FilterUtility.MatchFilter`). |
+| `VOCABULARY_FILTER_PROPERTIES` / `VOCABULARY_IS_PHRASE` | `vocabulary.ts` | The page's schema for the shared filter dialog (properties + phrase custom operator). |
+| `emptyVocabularyFilterDefinition()` | `vocabulary.ts` | The empty AND-joined root (the clear-filter state). |
 | `isVocabularyListFilterEmpty(filter)` | `vocabulary.ts` | True when no dimension is active. |
-| `isWordConditionActive(c)` / `isPhraseOperator(op)` | `vocabulary.ts` | Whether a word condition participates in filtering. |
-| `summarizeWordFilter(...)` / `summarizeRatingFilter(...)` | `vocabulary.ts` | Human-readable menu labels. |
+| `summarizeRatingFilter(...)` | `ui-common.ts` | Human-readable filter-menu label for the rating conditions (shared across pages). |
 | `buildVocabularyQuizQuestions(items, pool, direction)` | `vocabulary.ts` | Build the quiz question queue. |
 | `matchRating(rating, operator, value)` | `ui-common.ts` | Single rating comparison rule. |
-| `fisherYatesShuffle(array)` | `shared/utils/shuffle.ts` | Unbiased shuffle; returns a new array. |
+| `FisherYatesShuffle(array)` | `actslib` (`subject`) | Unbiased shuffle; returns a new array. |
 
 ---
 
@@ -799,8 +808,7 @@ src/app/pages/vocabulary-exercises/
 ├─ vocabulary-exercises-spellingoptions-dialog.component.ts/html
 ├─ vocabulary-exercises-quizoptions-dialog.component.ts/html/scss
 ├─ vocabulary-exercises-worksheetoptions-dialog.component.ts/html
-├─ vocabulary-exercises-word-filter-dialog.component.ts/html/scss/spec
-├─ vocabulary-exercises-rating-filter-dialog.component.ts/html/scss/spec
+├─ vocabulary-exercises-filter-dialog.component.ts/html/scss/spec
 ├─ _vocabulary-exercises-theme.scss
 └─ index.ts                                                   # barrel
 ```
@@ -808,6 +816,6 @@ src/app/pages/vocabulary-exercises/
 Supporting code outside the folder:
 - `src/app/interfaces/vocabulary.ts` — session/quiz/filter models and pure helpers (`matchVocabularyListFilter`, `buildVocabularyQuizQuestions`, `summarize…`).
 - `src/app/interfaces/ui-common.ts` — `SelectionModeEnum`, `RatingOperatorEnum`, `matchRating`, `replaceAtSymbols` (print blank rendering).
-- `src/app/shared/utils/shuffle.ts` — `fisherYatesShuffle`.
+- `src/app/shared/utils/shuffle.ts` — `pickWeighted` (shuffle moved to actslib `FisherYatesShuffle`).
 - `src/app/services/` — `LearningContentService` (file list + content), `LearningRatingService` (ratings), `AudioService` (Howler + Web Speech), `UIService` (worksheet handoff).
 - `src/assets/data/i18n/{en,zh-CN}.json` — translation keys.
diff --git a/src/app/interfaces/index.ts b/src/app/interfaces/index.ts
index d843f05..4682091 100644
--- a/src/app/interfaces/index.ts
+++ b/src/app/interfaces/index.ts
@@ -3,6 +3,7 @@ export * from './ui-common';
 export * from './learnchinese';
 export type * from './learnenglish';
 export * from './vocabulary';
+export * from './sentence';
 export * from './chinese-recite-status';
 export * from './formula-recite-queue';
 export * from './translate-data';
@@ -10,5 +11,6 @@ export type * from './english-listening';
 export * from './english-listening-ui';
 export * from './questionbank';
 export * from './questionbank-base';
+export * from './knowledge-list-filter';
 export * from './user-auth-info';
 export type * from './learning-rating';
diff --git a/src/app/interfaces/knowledge-list-filter.spec.ts b/src/app/interfaces/knowledge-list-filter.spec.ts
new file mode 100644
index 0000000..e5ea1c6
--- /dev/null
+++ b/src/app/interfaces/knowledge-list-filter.spec.ts
@@ -0,0 +1,232 @@
+import { FilterJoinType, FilterOperation, type IFilterCondition, type IFilterDefinition } from 'actslib';
+
+import {
+  isKnowledgeListFilterEmpty,
+  KNOWLEDGE_FILTER_PROPERTIES,
+  matchKnowledgeListFilter,
+  type KnowledgeListFilter,
+} from './knowledge-list-filter';
+import { QuestionBankTypeEnum } from './questionbank';
+import { getAllQuestionBankTypes } from './questionbank-base';
+import type { KnowledgeExerciseFileContent } from './questionbank-base';
+
+const makeItem = (overrides: Partial<KnowledgeExerciseFileContent> = {}): KnowledgeExerciseFileContent => ({
+  id: '1',
+  order: 1,
+  itemType: QuestionBankTypeEnum.SingleChoice,
+  question: 'What is 1+1?',
+  options: { A: 'one', B: 'two', C: 'three', D: 'four' },
+  answer: 'B',
+  tags: ['math'],
+  itemTypeString: '单选题',
+  hasAnswer: true,
+  ...overrides,
+});
+
+const emptyRoot: IFilterDefinition = { join: FilterJoinType.AND, conditions: [] };
+const emptyFilter: KnowledgeListFilter = { freeText: '', root: emptyRoot };
+
+/** Shorthand for a leaf condition (values as the dialog emits them). */
+const cond = (
+  property: string,
+  operation: FilterOperation,
+  lowValue: string | number,
+  enumValues?: IFilterCondition['enumValues']
+): IFilterCondition => ({ property, operation, lowValue, ...(enumValues ? { enumValues } : {}) });
+
+const filterWith = (...conditions: Array<IFilterCondition | IFilterDefinition>): KnowledgeListFilter => ({
+  freeText: '',
+  root: { join: FilterJoinType.AND, conditions },
+});
+
+describe('knowledge-list-filter', () => {
+  describe('KNOWLEDGE_FILTER_PROPERTIES', () => {
+    it('covers the text columns, the type enum and the rating', () => {
+      expect(KNOWLEDGE_FILTER_PROPERTIES.map(p => p.key)).toEqual(['id', 'itemType', 'tags', 'rating']);
+      expect(KNOWLEDGE_FILTER_PROPERTIES.map(p => p.kind)).toEqual(['string', 'enum', 'string', 'number']);
+    });
+
+    it('declares itemType as the question-type enum with a choice per type', () => {
+      const itemType = KNOWLEDGE_FILTER_PROPERTIES.find(p => p.key === 'itemType');
+      expect(itemType?.enumValues).toBe(QuestionBankTypeEnum);
+      // One choice per offered type, valued with the raw enum member.
+      const types = getAllQuestionBankTypes();
+      expect(itemType?.choices?.map(c => c.value)).toEqual(Array.from(types.keys()));
+      // Labels match the table's Type column descriptions.
+      expect(itemType?.choices?.[0]?.labelKey).toBe(types.get(QuestionBankTypeEnum.SingleChoice));
+    });
+
+    it('whitelists shape-match operators on text and comparisons on rating', () => {
+      const id = KNOWLEDGE_FILTER_PROPERTIES.find(p => p.key === 'id');
+      expect(id?.operations).toEqual([
+        FilterOperation.BeginsWith,
+        FilterOperation.Contains,
+        FilterOperation.Equal,
+        FilterOperation.EndsWith,
+      ]);
+      expect(id?.prepareValue?.('  Ab  ')).toBe('ab');
+      const rating = KNOWLEDGE_FILTER_PROPERTIES.find(p => p.key === 'rating');
+      expect(rating?.operations).toEqual([
+        FilterOperation.GreaterOrEqual,
+        FilterOperation.GreaterThan,
+        FilterOperation.Equal,
+        FilterOperation.LessOrEqual,
+        FilterOperation.LessThan,
+        FilterOperation.Between,
+      ]);
+      expect(rating?.numberRange).toEqual({ min: 0, max: 5 });
+    });
+  });
+
+  describe('isKnowledgeListFilterEmpty', () => {
+    it('should be empty for the default criteria', () => {
+      expect(isKnowledgeListFilterEmpty({ ...emptyFilter })).toBe(true);
+    });
+
+    it('should be non-empty for free text or any condition', () => {
+      expect(isKnowledgeListFilterEmpty({ ...emptyFilter, freeText: 'x' })).toBe(false);
+      expect(isKnowledgeListFilterEmpty(filterWith(cond('tags', FilterOperation.Contains, 'math')))).toBe(false);
+      expect(isKnowledgeListFilterEmpty(filterWith(cond('rating', FilterOperation.Equal, 3)))).toBe(false);
+    });
+
+    it('should be empty when the root holds only empty sub-groups', () => {
+      expect(
+        isKnowledgeListFilterEmpty({
+          ...emptyFilter,
+          root: { join: FilterJoinType.AND, conditions: [{ join: FilterJoinType.OR, conditions: [] }] },
+        })
+      ).toBe(true);
+    });
+  });
+
+  describe('matchKnowledgeListFilter', () => {
+    it('should match everything for the empty filter', () => {
+      expect(matchKnowledgeListFilter(makeItem(), 0, { ...emptyFilter })).toBe(true);
+    });
+
+    describe('free text', () => {
+      it('should require every whitespace-separated term (case-insensitive)', () => {
+        expect(matchKnowledgeListFilter(makeItem(), 0, { ...emptyFilter, freeText: 'What 1+1' })).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 0, { ...emptyFilter, freeText: 'WHAT' })).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 0, { ...emptyFilter, freeText: 'what missing' })).toBe(false);
+      });
+
+      it('should search across id, tags, options, answers, hint and extra info', () => {
+        expect(matchKnowledgeListFilter(makeItem(), 0, { ...emptyFilter, freeText: 'math' })).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 0, { ...emptyFilter, freeText: 'two' })).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem({ extraInfo: ['deep note'] }), 0, { ...emptyFilter, freeText: 'deep' })).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem({ hintofanswer: 'hint text' }), 0, { ...emptyFilter, freeText: 'hint' })).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 0, { ...emptyFilter, freeText: 'absent' })).toBe(false);
+      });
+
+      it('should search sub-items of composite types', () => {
+        const composite = makeItem({
+          itemType: QuestionBankTypeEnum.ReadingComprehension,
+          question: 'Passage',
+          items: [
+            {
+              id: '1-1', order: 1, itemType: QuestionBankTypeEnum.TrueFalse, question: 'Sub question text',
+            },
+          ],
+        });
+        expect(matchKnowledgeListFilter(composite, 0, { ...emptyFilter, freeText: 'sub' })).toBe(true);
+      });
+    });
+
+    describe('text conditions', () => {
+      it('should match per field and operator, case-folded', () => {
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(cond('id', FilterOperation.Equal, '1')))).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(cond('id', FilterOperation.Equal, '2')))).toBe(false);
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(cond('id', FilterOperation.BeginsWith, '1')))).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(cond('id', FilterOperation.EndsWith, '2')))).toBe(false);
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(cond('tags', FilterOperation.Contains, 'ath')))).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(cond('tags', FilterOperation.Contains, 'sci')))).toBe(false);
+        // The tags array is matched as its space-joined, folded text.
+        const mixedCase = makeItem({ tags: ['Math', 'Algebra'] });
+        expect(matchKnowledgeListFilter(mixedCase, 0, filterWith(cond('tags', FilterOperation.Contains, 'algebra')))).toBe(true);
+      });
+
+      it('should AND multiple conditions', () => {
+        expect(
+          matchKnowledgeListFilter(makeItem(), 0, filterWith(
+            cond('tags', FilterOperation.Contains, 'math'),
+            cond('id', FilterOperation.Equal, '1')
+          ))
+        ).toBe(true);
+        expect(
+          matchKnowledgeListFilter(makeItem(), 0, filterWith(
+            cond('tags', FilterOperation.Contains, 'math'),
+            cond('id', FilterOperation.Equal, '2')
+          ))
+        ).toBe(false);
+      });
+    });
+
+    describe('itemType enum (the shared dialog proof)', () => {
+      // The dialog emits one choice as a single Equal and N choices as an
+      // OR-of-Equal group, both carrying enumValues.
+      const eqType = (type: QuestionBankTypeEnum): IFilterCondition =>
+        cond('itemType', FilterOperation.Equal, type, QuestionBankTypeEnum);
+
+      it('matches a single type pick', () => {
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(eqType(QuestionBankTypeEnum.SingleChoice)))).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(eqType(QuestionBankTypeEnum.Essay)))).toBe(false);
+      });
+
+      it('matches an OR group (multi-select) when the row type is among the picks', () => {
+        const anyOf: IFilterDefinition = {
+          join: FilterJoinType.OR,
+          conditions: [eqType(QuestionBankTypeEnum.Essay), eqType(QuestionBankTypeEnum.SingleChoice)],
+        };
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(anyOf))).toBe(true);
+        const noneOf: IFilterDefinition = {
+          join: FilterJoinType.OR,
+          conditions: [eqType(QuestionBankTypeEnum.Essay), eqType(QuestionBankTypeEnum.TrueFalse)],
+        };
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(noneOf))).toBe(false);
+      });
+
+      it('never matches a non-member value (actslib enum validation)', () => {
+        expect(
+          matchKnowledgeListFilter(makeItem(), 0, filterWith(cond('itemType', FilterOperation.Equal, 'Nonsense', QuestionBankTypeEnum)))
+        ).toBe(false);
+      });
+    });
+
+    describe('rating conditions', () => {
+      it('should apply numeric comparisons with unrated (0) semantics', () => {
+        expect(matchKnowledgeListFilter(makeItem(), 5, filterWith(cond('rating', FilterOperation.LessThan, 1)))).toBe(false);
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(cond('rating', FilterOperation.LessThan, 1)))).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 3, filterWith(cond('rating', FilterOperation.GreaterOrEqual, 3)))).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 2, filterWith(cond('rating', FilterOperation.GreaterThan, 3)))).toBe(false);
+        // Between is inclusive on both bounds (as the dialog's editor emits).
+        const between = (low: number, high: number) => ({
+          property: 'rating',
+          operation: FilterOperation.Between,
+          lowValue: low,
+          highValue: high,
+        });
+        expect(matchKnowledgeListFilter(makeItem(), 3, filterWith(between(2, 4)))).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 0, filterWith(between(0, 1)))).toBe(true);
+        expect(matchKnowledgeListFilter(makeItem(), 5, filterWith(between(2, 4)))).toBe(false);
+      });
+    });
+
+    it('should AND free text, text, enum and rating dimensions', () => {
+      const orTypes: IFilterDefinition = {
+        join: FilterJoinType.OR,
+        conditions: [
+          cond('itemType', FilterOperation.Equal, QuestionBankTypeEnum.SingleChoice, QuestionBankTypeEnum),
+          cond('itemType', FilterOperation.Equal, QuestionBankTypeEnum.Essay, QuestionBankTypeEnum),
+        ],
+      };
+      const filter: KnowledgeListFilter = {
+        freeText: 'what',
+        root: { join: FilterJoinType.AND, conditions: [cond('tags', FilterOperation.Contains, 'math'), orTypes, cond('rating', FilterOperation.LessThan, 1)] },
+      };
+      expect(matchKnowledgeListFilter(makeItem(), 0, filter)).toBe(true);
+      expect(matchKnowledgeListFilter(makeItem(), 4, filter)).toBe(false);
+      expect(matchKnowledgeListFilter(makeItem({ tags: ['history'] }), 0, filter)).toBe(false);
+    });
+  });
+});
diff --git a/src/app/interfaces/knowledge-list-filter.ts b/src/app/interfaces/knowledge-list-filter.ts
new file mode 100644
index 0000000..ff3f930
--- /dev/null
+++ b/src/app/interfaces/knowledge-list-filter.ts
@@ -0,0 +1,192 @@
+//
+// Filter pipeline of the knowledge exercises list page.
+//
+// The filter is edited by SharedFilterDialogComponent; its seed and result are
+// actslib `IFilterDefinition`, so this page keeps no tree model of its own
+// (see docs/reusable-filter-dialog-design.md — this page is the enum proof).
+
+import {
+  FilterJoinType,
+  FilterOperation,
+  FilterUtility,
+  type IFilterDefinition,
+} from 'actslib';
+
+import { hasActiveFilterDefinition } from "../shared/filter-dialog/filter-dialog-model";
+import type { FilterEnumChoice, FilterableProperty } from "../shared/filter-dialog/filter-dialog-model";
+
+import { QuestionBankTypeEnum } from "./questionbank";
+import { getAllQuestionBankTypes } from "./questionbank-base";
+import type { KnowledgeExerciseFileContent } from "./questionbank-base";
+
+/** actslib string comparisons are case-sensitive while the page matches
+ *  case-insensitively — the dialog folds emitted text values (this hook) and
+ *  `matchKnowledgeListFilter` folds the row fields the same way. Never
+ *  applied to the itemType enum values (they must match raw). */
+const foldKnowledgeText = (value: string | number): string => String(value).trim().toLowerCase();
+
+const TEXT_MATCH_OPERATIONS: FilterOperation[] = [
+  FilterOperation.BeginsWith,
+  FilterOperation.Contains,
+  FilterOperation.Equal,
+  FilterOperation.EndsWith,
+];
+
+/**
+ * Options of the Type multi-select: the SAME literal descriptions the table's
+ * Type column renders (`getQuestionBankTypeDescription`), passed through as
+ * label keys — Transloco returns an unknown key unchanged, so they display
+ * as-is and the picker matches the column.
+ */
+const ITEM_TYPE_CHOICES: FilterEnumChoice[] = Array.from(
+  getAllQuestionBankTypes(),
+  ([value, label]) => ({ value, labelKey: label })
+);
+
+/**
+ * Knowledge's filterable properties: the two text columns, the question-type
+ * enum, and the per-user rating. Lexicographic string comparisons are not
+ * offered (the same call the word/Chinese/sentence pages make). `itemType` is
+ * the enum proof (§7.3): N picks emit an OR-of-`Equal` group that folds back
+ * losslessly. `rating` is not a row field — the predicate passes it in the
+ * synthesized target (see `matchKnowledgeListFilter`); unrated rows carry 0
+ * and compare numerically.
+ */
+export const KNOWLEDGE_FILTER_PROPERTIES: FilterableProperty[] = [
+  {
+    key: 'id',
+    labelKey: 'id',
+    kind: 'string',
+    operations: TEXT_MATCH_OPERATIONS,
+    prepareValue: foldKnowledgeText,
+  },
+  {
+    key: 'itemType',
+    labelKey: 'knowledgeExercises.fieldType',
+    kind: 'enum',
+    enumValues: QuestionBankTypeEnum,
+    choices: ITEM_TYPE_CHOICES,
+  },
+  {
+    key: 'tags',
+    labelKey: 'knowledgeExercises.tags',
+    kind: 'string',
+    operations: TEXT_MATCH_OPERATIONS,
+    prepareValue: foldKnowledgeText,
+  },
+  {
+    key: 'rating',
+    labelKey: 'rating',
+    kind: 'number',
+    operations: [
+      FilterOperation.GreaterOrEqual,
+      FilterOperation.GreaterThan,
+      FilterOperation.Equal,
+      FilterOperation.LessOrEqual,
+      FilterOperation.LessThan,
+      FilterOperation.Between,
+    ],
+    numberRange: { min: 0, max: 5 },
+  },
+];
+
+/** A fresh (empty) filter definition: matches everything, shown as "new filter". */
+export const emptyKnowledgeFilterDefinition = (): IFilterDefinition => ({
+  join: FilterJoinType.AND,
+  conditions: [],
+});
+
+/**
+ * Combined criteria of the knowledge list filter bar. `freeText` applies live
+ * (multi-term cross-field substring over id/question/tags/options/answers/
+ * hint/extraInfo/sub-items, every whitespace-separated term required); `root`
+ * is the actslib condition definition produced by the shared filter dialog.
+ * The definition and freeText are ANDed. Text condition values arrive
+ * case-folded (the dialog's `prepareValue` hooks on
+ * `KNOWLEDGE_FILTER_PROPERTIES`); itemType values are raw enum members.
+ */
+export interface KnowledgeListFilter {
+  /** Cross-field substring search (every term must match somewhere). */
+  freeText: string;
+  /** actslib filter definition (text/enum/rating leaves and nested groups). */
+  root: IFilterDefinition;
+}
+
+/**
+ * True when the filter carries nothing: blank freeText and no condition
+ * anywhere in the definition (an empty root, or only empty sub-groups).
+ */
+export const isKnowledgeListFilterEmpty = (filter: KnowledgeListFilter): boolean =>
+  filter.freeText.trim().length === 0 && !hasActiveFilterDefinition(filter.root);
+
+/** Every searchable text of a row, joined. Mirrors the fields the former
+ *  weighted free-text search covered (including sub-items of composite
+ *  types); array-valued fields are flattened. */
+const knowledgeItemSearchText = (
+  item: Pick<
+    KnowledgeExerciseFileContent,
+    'id' | 'question' | 'tags' | 'options' | 'answer' | 'answers' | 'hintofanswer' | 'extraInfo' | 'items'
+  >
+): string => {
+  const parts: string[] = [
+    item.id ?? '',
+    item.question ?? '',
+    (item.tags ?? []).join(' '),
+  ];
+  if (item.options) {
+    parts.push(...Object.values(item.options));
+  }
+  if (item.answer) {
+    parts.push(item.answer);
+  }
+  if (item.answers) {
+    parts.push(...item.answers);
+  }
+  if (item.hintofanswer) {
+    parts.push(item.hintofanswer);
+  }
+  if (item.extraInfo) {
+    parts.push(...item.extraInfo);
+  }
+  for (const sub of item.items ?? []) {
+    parts.push(knowledgeItemSearchText(sub));
+  }
+  return parts.join(' ').toLowerCase();
+};
+
+/**
+ * Single matching rule for the knowledge list filter bar: freeText (every
+ * whitespace-separated term) AND the actslib definition. All filtering
+ * decisions flow through here: the table predicate calls it and nothing else
+ * grows private matching logic.
+ */
+export const matchKnowledgeListFilter = (
+  item: KnowledgeExerciseFileContent,
+  rating: number,
+  filter: KnowledgeListFilter
+): boolean => {
+  const freeText = filter.freeText.trim().toLowerCase();
+  if (freeText.length > 0) {
+    const haystack = knowledgeItemSearchText(item);
+    // Multi-term search: every whitespace-separated term must appear
+    // somewhere (mirrors the former ranked search's all-terms gate).
+    const terms = freeText.split(/\s+/).filter(term => term.length > 0);
+    if (!terms.every(term => haystack.includes(term))) {
+      return false;
+    }
+  }
+
+  // FilterUtility compares strings case-sensitively, so the text condition
+  // values are folded by the dialog's prepareValue hooks and the row's text
+  // fields fold here. itemType rides along RAW — actslib validates it against
+  // `enumValues` and compares exact members. The rating is not a row field:
+  // it lives in the page's rating map; unrated rows pass 0 and compare
+  // numerically, like unrated rows on every other list page.
+  const target = {
+    id: (item.id ?? '').toLowerCase(),
+    itemType: item.itemType,
+    tags: (item.tags ?? []).join(' ').toLowerCase(),
+    rating,
+  };
+  return FilterUtility.MatchFilter(target, filter.root);
+};
diff --git a/src/app/interfaces/learnchinese.spec.ts b/src/app/interfaces/learnchinese.spec.ts
index 44817b0..db53c18 100644
--- a/src/app/interfaces/learnchinese.spec.ts
+++ b/src/app/interfaces/learnchinese.spec.ts
@@ -1,7 +1,13 @@
+import { FilterJoinType, FilterOperation, type IFilterCondition, type IFilterDefinition } from 'actslib';
+
 import {
+  CHINESE_FILTER_PROPERTIES,
   ChineseExerciseTypeEnum,
   getChineseReciteItemDisplayContent,
   convertChineseReciteItemToKnowledge,
+  isChineseListFilterEmpty,
+  matchChineseListFilter,
+  type ChineseListFilter,
   type LearnChineseFileItem,
 } from './learnchinese';
 import { QuestionBankTypeEnum, QuestionBankItemLevelEnum } from './questionbank';
@@ -762,4 +768,179 @@ describe('learnchinese.ts', () => {
       expect(result[0].question).toBe('Test. undefined');
     });
   });
+
+  describe('Chinese list filter', () => {
+    const emptyRoot: IFilterDefinition = { join: FilterJoinType.AND, conditions: [] };
+    const baseFilter: ChineseListFilter = { freeText: '', root: emptyRoot };
+
+    const item: LearnChineseFileItem = {
+      id: 7,
+      subject: '静夜思',
+      author: '李白',
+      content: '床前明月光，疑是地上霜。',
+      source: '唐诗三百首',
+    };
+
+    /** Shorthand for a leaf condition (values as the dialog emits them). */
+    const cond = (
+      property: string,
+      operation: FilterOperation,
+      lowValue: string | number
+    ): IFilterCondition => ({ property, operation, lowValue });
+
+    const filterWith = (...conditions: Array<IFilterCondition | IFilterDefinition>): ChineseListFilter => ({
+      freeText: '',
+      root: { join: FilterJoinType.AND, conditions },
+    });
+
+    describe('CHINESE_FILTER_PROPERTIES', () => {
+      it('covers the three text columns plus the rating', () => {
+        expect(CHINESE_FILTER_PROPERTIES.map(p => p.key)).toEqual(['subject', 'author', 'content', 'rating']);
+        expect(CHINESE_FILTER_PROPERTIES.map(p => p.kind)).toEqual(['string', 'string', 'string', 'number']);
+      });
+
+      it('whitelists shape-match operators on text (no lexicographic comparisons)', () => {
+        const subject = CHINESE_FILTER_PROPERTIES.find(p => p.key === 'subject');
+        expect(subject?.operations).toEqual([
+          FilterOperation.BeginsWith,
+          FilterOperation.Contains,
+          FilterOperation.Equal,
+          FilterOperation.EndsWith,
+        ]);
+        expect(subject?.prepareValue).toBeInstanceOf(Function);
+      });
+
+      it('offers the full comparison set on rating (incl. Between), ranged 0..5', () => {
+        const rating = CHINESE_FILTER_PROPERTIES.find(p => p.key === 'rating');
+        expect(rating?.operations).toEqual([
+          FilterOperation.GreaterOrEqual,
+          FilterOperation.GreaterThan,
+          FilterOperation.Equal,
+          FilterOperation.LessOrEqual,
+          FilterOperation.LessThan,
+          FilterOperation.Between,
+        ]);
+        expect(rating?.numberRange).toEqual({ min: 0, max: 5 });
+      });
+    });
+
+    describe('isChineseListFilterEmpty', () => {
+      it('is empty when no condition is set', () => {
+        expect(isChineseListFilterEmpty({ ...baseFilter })).toBe(true);
+      });
+
+      it('is not empty when free text or a condition is set', () => {
+        expect(isChineseListFilterEmpty({ ...baseFilter, freeText: 'a' })).toBe(false);
+        expect(isChineseListFilterEmpty(filterWith(cond('subject', FilterOperation.Contains, 'a')))).toBe(false);
+      });
+
+      it('is empty when the root holds only empty sub-groups', () => {
+        expect(
+          isChineseListFilterEmpty({
+            ...baseFilter,
+            root: { join: FilterJoinType.AND, conditions: [{ join: FilterJoinType.OR, conditions: [] }] },
+          })
+        ).toBe(true);
+      });
+    });
+
+    describe('matchChineseListFilter', () => {
+      it('matches everything when the filter is empty', () => {
+        expect(matchChineseListFilter(item, 0, { ...baseFilter })).toBe(true);
+      });
+
+      it('free text matches all fields case-insensitively (legacy default-predicate haystack)', () => {
+        expect(matchChineseListFilter(item, 0, { ...baseFilter, freeText: '李白' })).toBe(true);
+        expect(matchChineseListFilter(item, 0, { ...baseFilter, freeText: '明月光' })).toBe(true);
+        expect(matchChineseListFilter(item, 0, { ...baseFilter, freeText: '唐诗' })).toBe(true);
+        expect(matchChineseListFilter(item, 0, { ...baseFilter, freeText: '7' })).toBe(true);
+        expect(matchChineseListFilter(item, 0, { ...baseFilter, freeText: '杜甫' })).toBe(false);
+      });
+
+      it('each condition honors its operator against the chosen field', () => {
+        expect(matchChineseListFilter(item, 0, filterWith(cond('subject', FilterOperation.BeginsWith, '静夜')))).toBe(true);
+        expect(matchChineseListFilter(item, 0, filterWith(cond('subject', FilterOperation.BeginsWith, '夜思')))).toBe(false);
+        expect(matchChineseListFilter(item, 0, filterWith(cond('author', FilterOperation.Equal, '李白')))).toBe(true);
+        expect(matchChineseListFilter(item, 0, filterWith(cond('content', FilterOperation.EndsWith, '上霜。')))).toBe(true);
+        // subject field only: the content must not match a 'subject' condition.
+        expect(matchChineseListFilter(item, 0, filterWith(cond('subject', FilterOperation.Contains, '明月光')))).toBe(false);
+      });
+
+      it('matches case-folded text (dialog emits folded values, rows fold here)', () => {
+        const latin: LearnChineseFileItem = { subject: 'Spring Dawn', author: 'Li Bai' };
+        expect(matchChineseListFilter(latin, 0, filterWith(cond('subject', FilterOperation.BeginsWith, 'spring')))).toBe(true);
+        expect(matchChineseListFilter(latin, 0, filterWith(cond('author', FilterOperation.Equal, 'li bai')))).toBe(true);
+      });
+
+      it('treats missing author/content as empty strings and unrated as 0', () => {
+        const bare: LearnChineseFileItem = { subject: '无题' };
+        expect(matchChineseListFilter(bare, 0, filterWith(cond('author', FilterOperation.Equal, '')))).toBe(true);
+        expect(matchChineseListFilter(bare, 0, filterWith(cond('author', FilterOperation.Equal, '李白')))).toBe(false);
+        expect(matchChineseListFilter(bare, 0, filterWith(cond('rating', FilterOperation.LessThan, 1)))).toBe(true);
+        expect(matchChineseListFilter(bare, 0, filterWith(cond('rating', FilterOperation.GreaterOrEqual, 1)))).toBe(false);
+        // Between is inclusive on both bounds (as the dialog's editor emits).
+        const between = (low: number, high: number) => ({
+          property: 'rating',
+          operation: FilterOperation.Between,
+          lowValue: low,
+          highValue: high,
+        });
+        expect(matchChineseListFilter(bare, 3, filterWith(between(2, 4)))).toBe(true);
+        expect(matchChineseListFilter(bare, 4, filterWith(between(2, 4)))).toBe(true);
+        expect(matchChineseListFilter(bare, 5, filterWith(between(2, 4)))).toBe(false);
+      });
+
+      it('ANDs multiple conditions', () => {
+        expect(
+          matchChineseListFilter(item, 0, filterWith(
+            cond('author', FilterOperation.Equal, '李白'),
+            cond('content', FilterOperation.Contains, '明月')
+          ))
+        ).toBe(true);
+        expect(
+          matchChineseListFilter(item, 0, filterWith(
+            cond('author', FilterOperation.Equal, '李白'),
+            cond('subject', FilterOperation.Contains, '春晓')
+          ))
+        ).toBe(false);
+      });
+
+      it('evaluates nested AND/OR groups (SQL-WHERE nesting)', () => {
+        const group: ChineseListFilter = {
+          freeText: '',
+          root: {
+            join: FilterJoinType.AND,
+            conditions: [
+              cond('subject', FilterOperation.Contains, '静夜'),
+              {
+                join: FilterJoinType.OR,
+                conditions: [
+                  cond('author', FilterOperation.Equal, '杜甫'),
+                  cond('rating', FilterOperation.GreaterOrEqual, 3),
+                ],
+              },
+            ],
+          },
+        };
+        // 静夜思 matches AND (杜甫 fails OR rating>=3 passes at rating 4).
+        expect(matchChineseListFilter(item, 4, group)).toBe(true);
+        expect(matchChineseListFilter(item, 2, group)).toBe(false);
+      });
+
+      it('ANDs free text with the definition', () => {
+        expect(
+          matchChineseListFilter(item, 0, {
+            freeText: '李白',
+            root: { join: FilterJoinType.AND, conditions: [cond('subject', FilterOperation.Contains, '春晓')] },
+          })
+        ).toBe(false);
+        expect(
+          matchChineseListFilter(item, 0, {
+            freeText: '李白',
+            root: { join: FilterJoinType.AND, conditions: [cond('subject', FilterOperation.Contains, '静夜')] },
+          })
+        ).toBe(true);
+      });
+    });
+  });
 });
\ No newline at end of file
diff --git a/src/app/interfaces/learnchinese.ts b/src/app/interfaces/learnchinese.ts
index f800303..b8fbbd7 100644
--- a/src/app/interfaces/learnchinese.ts
+++ b/src/app/interfaces/learnchinese.ts
@@ -1,9 +1,144 @@
 //
 // Data file.
 
+import {
+  FilterJoinType,
+  FilterOperation,
+  FilterUtility,
+  type IFilterDefinition,
+} from 'actslib';
+
+import { hasActiveFilterDefinition } from "../shared/filter-dialog/filter-dialog-model";
+import type { FilterableProperty } from "../shared/filter-dialog/filter-dialog-model";
+
 import { QuestionBankItemLevelEnum, QuestionBankTypeEnum } from "./questionbank";
 import type { KnowledgeExerciseFileContent } from "./questionbank-base";
 
+// ── Filter-bar schema (shared filter dialog) ───────────────────────────────
+//
+// The Chinese list filter is edited by SharedFilterDialogComponent; its seed
+// and result are actslib `IFilterDefinition`, so this page keeps no tree model
+// of its own (see docs/reusable-filter-dialog-design.md).
+
+/** actslib string comparisons are case-sensitive while the page matches
+ *  case-insensitively — the dialog folds emitted text values (this hook) and
+ *  `matchChineseListFilter` folds the row fields the same way. */
+const foldChineseText = (value: string | number): string => String(value).trim().toLowerCase();
+
+const TEXT_MATCH_OPERATIONS: FilterOperation[] = [
+  FilterOperation.BeginsWith,
+  FilterOperation.Contains,
+  FilterOperation.Equal,
+  FilterOperation.EndsWith,
+];
+
+/**
+ * Chinese's filterable properties: the three text columns plus the per-user
+ * rating. Lexicographic string comparisons are not offered (the same call
+ * vocabulary makes for its word columns); `rating` is not a row field — the
+ * predicate passes it in the synthesized target (see
+ * `matchChineseListFilter`); unrated items carry 0 and compare numerically.
+ */
+export const CHINESE_FILTER_PROPERTIES: FilterableProperty[] = [
+  {
+    key: 'subject',
+    labelKey: 'subject',
+    kind: 'string',
+    operations: TEXT_MATCH_OPERATIONS,
+    prepareValue: foldChineseText,
+  },
+  {
+    key: 'author',
+    labelKey: 'common.author',
+    kind: 'string',
+    operations: TEXT_MATCH_OPERATIONS,
+    prepareValue: foldChineseText,
+  },
+  {
+    key: 'content',
+    labelKey: 'content',
+    kind: 'string',
+    operations: TEXT_MATCH_OPERATIONS,
+    prepareValue: foldChineseText,
+  },
+  {
+    key: 'rating',
+    labelKey: 'rating',
+    kind: 'number',
+    operations: [
+      FilterOperation.GreaterOrEqual,
+      FilterOperation.GreaterThan,
+      FilterOperation.Equal,
+      FilterOperation.LessOrEqual,
+      FilterOperation.LessThan,
+      FilterOperation.Between,
+    ],
+    numberRange: { min: 0, max: 5 },
+  },
+];
+
+/** A fresh (empty) filter definition: matches everything, shown as "new filter". */
+export const emptyChineseFilterDefinition = (): IFilterDefinition => ({
+  join: FilterJoinType.AND,
+  conditions: [],
+});
+
+/**
+ * Combined criteria of the Chinese list filter bar. `freeText` applies live
+ * (cross-field substring over id/subject/author/content/source); `root` is
+ * the actslib condition definition produced by the shared filter dialog. The
+ * definition and freeText are ANDed. Condition values arrive case-folded (the
+ * dialog's `prepareValue` hooks on `CHINESE_FILTER_PROPERTIES`).
+ */
+export interface ChineseListFilter {
+  /** Cross-field substring search (legacy default-predicate behaviour). */
+  freeText: string;
+  /** actslib filter definition (text/rating leaves and nested AND/OR groups). */
+  root: IFilterDefinition;
+}
+
+/**
+ * True when the filter carries nothing: blank freeText and no condition
+ * anywhere in the definition (an empty root, or only empty sub-groups).
+ */
+export const isChineseListFilterEmpty = (filter: ChineseListFilter): boolean =>
+  filter.freeText.trim().length === 0 && !hasActiveFilterDefinition(filter.root);
+
+/**
+ * Single matching rule for the Chinese list filter bar: freeText AND the
+ * actslib definition. All filtering decisions flow through here: the table
+ * predicate calls it and nothing else grows private matching logic.
+ */
+export const matchChineseListFilter = (
+  item: LearnChineseFileItem,
+  rating: number,
+  filter: ChineseListFilter
+): boolean => {
+  const freeText = filter.freeText.trim().toLowerCase();
+  if (freeText.length > 0) {
+    // Mirrors the old default MatTableDataSource predicate: the row's string
+    // values concatenated, lowercased, substring-matched.
+    const haystack =
+      `${item.id ?? ''}${item.subject}${item.author ?? ''}${item.content ?? ''}${item.source ?? ''}`.toLowerCase();
+    if (!haystack.includes(freeText)) {
+      return false;
+    }
+  }
+
+  // FilterUtility compares strings case-sensitively, so the condition values
+  // are folded by the dialog's prepareValue hooks and the row's text fields
+  // fold here. The rating rides along as a numeric property: it lives in the
+  // page's rating map, not on the row; unrated items pass 0 and compare
+  // numerically, like unrated rows on every other list page.
+  const target = {
+    subject: item.subject.toLowerCase(),
+    author: (item.author ?? '').toLowerCase(),
+    content: (item.content ?? '').toLowerCase(),
+    rating,
+  };
+  return FilterUtility.MatchFilter(target, filter.root);
+};
+
 export enum ChineseExerciseTypeEnum {
   ClassicalChinese = "Classical Chinese", // Classical Chinese，古文
   Composition = "Composition",       // Composition，写作
diff --git a/src/app/interfaces/questionbank-base.ts b/src/app/interfaces/questionbank-base.ts
index 88ef9bf..521067c 100644
--- a/src/app/interfaces/questionbank-base.ts
+++ b/src/app/interfaces/questionbank-base.ts
@@ -13,7 +13,6 @@ import {
   QuestionBankTypeEnum,
   VALID_OPTION_KEYS,
 } from './questionbank';
-import type { SelectionModeEnum } from './ui-common';
 import { hasChinese, replaceAtSymbols } from './ui-common';
 
 export const getQuestionBankTypeDescription = (itemType: QuestionBankTypeEnum): string => {
@@ -1394,13 +1393,6 @@ export interface KnowledgeExercisePrintOption {
   answerLineBreakPerItem?: boolean;
 }
 
-export interface KnowledgeExerciseSelectOption {
-  selectedSelectMode: SelectionModeEnum;
-  importIDs?: string;
-  countOfItems?: number;
-  filterOnTag?: string;
-}
-
 // Check item has answer or not
 // 1. Fill in the blank always has the answer
 export const doesQuestionBankItemHasAnswer = (item: {
diff --git a/src/app/interfaces/sentence.spec.ts b/src/app/interfaces/sentence.spec.ts
new file mode 100644
index 0000000..52481d3
--- /dev/null
+++ b/src/app/interfaces/sentence.spec.ts
@@ -0,0 +1,262 @@
+import { FilterJoinType, FilterOperation, type IFilterCondition, type IFilterDefinition } from 'actslib';
+
+import {
+  buildSentenceQuizQuestions,
+  isSentenceListFilterEmpty,
+  matchSentenceListFilter,
+  normalizeSentenceAnswer,
+  SENTENCE_FILTER_PROPERTIES,
+  SENTENCE_QUIZ_BLANK,
+  type SentenceListFilter,
+} from './sentence';
+
+const emptyRoot: IFilterDefinition = { join: FilterJoinType.AND, conditions: [] };
+const baseFilter: SentenceListFilter = { freeText: '', root: emptyRoot };
+
+const item = { id: 's-7', ensent: 'Apple pie is sweet.', cnsent: '苹果派很甜。' };
+
+/** Shorthand for a leaf condition (values as the dialog emits them, folded). */
+const cond = (property: string, operation: FilterOperation, lowValue: string | number): IFilterCondition => ({
+  property,
+  operation,
+  lowValue,
+});
+
+const filterWith = (...conditions: Array<IFilterCondition | IFilterDefinition>): SentenceListFilter => ({
+  freeText: '',
+  root: { join: FilterJoinType.AND, conditions },
+});
+
+describe('sentence.ts', () => {
+  describe('SENTENCE_FILTER_PROPERTIES', () => {
+    it('covers the two text columns plus the rating', () => {
+      expect(SENTENCE_FILTER_PROPERTIES.map(p => p.key)).toEqual(['ensent', 'cnsent', 'rating']);
+      expect(SENTENCE_FILTER_PROPERTIES.map(p => p.kind)).toEqual(['string', 'string', 'number']);
+    });
+
+    it('whitelists shape-match operators on text and folds values', () => {
+      const en = SENTENCE_FILTER_PROPERTIES.find(p => p.key === 'ensent');
+      expect(en?.operations).toEqual([
+        FilterOperation.BeginsWith,
+        FilterOperation.Contains,
+        FilterOperation.Equal,
+        FilterOperation.EndsWith,
+      ]);
+      expect(en?.prepareValue?.('  Apple  ')).toBe('apple');
+    });
+
+    it('offers the full comparison set on rating (incl. Between), ranged 0..5', () => {
+      const rating = SENTENCE_FILTER_PROPERTIES.find(p => p.key === 'rating');
+      expect(rating?.operations).toEqual([
+        FilterOperation.GreaterOrEqual,
+        FilterOperation.GreaterThan,
+        FilterOperation.Equal,
+        FilterOperation.LessOrEqual,
+        FilterOperation.LessThan,
+        FilterOperation.Between,
+      ]);
+      expect(rating?.numberRange).toEqual({ min: 0, max: 5 });
+    });
+  });
+
+  describe('isSentenceListFilterEmpty', () => {
+    it('is empty when no condition is set', () => {
+      expect(isSentenceListFilterEmpty({ ...baseFilter })).toBe(true);
+    });
+
+    it('is not empty when free text or a condition is set', () => {
+      expect(isSentenceListFilterEmpty({ ...baseFilter, freeText: 'a' })).toBe(false);
+      expect(isSentenceListFilterEmpty(filterWith(cond('ensent', FilterOperation.Contains, 'a')))).toBe(false);
+    });
+
+    it('is empty when the root holds only empty sub-groups', () => {
+      expect(
+        isSentenceListFilterEmpty({
+          ...baseFilter,
+          root: { join: FilterJoinType.AND, conditions: [{ join: FilterJoinType.OR, conditions: [] }] },
+        })
+      ).toBe(true);
+    });
+  });
+
+  describe('matchSentenceListFilter', () => {
+    it('matches everything when the filter is empty', () => {
+      expect(matchSentenceListFilter(item, 0, { ...baseFilter })).toBe(true);
+    });
+
+    it('free text matches id, ensent and cnsent case-insensitively', () => {
+      expect(matchSentenceListFilter(item, 0, { ...baseFilter, freeText: 'APPLE' })).toBe(true);
+      expect(matchSentenceListFilter(item, 0, { ...baseFilter, freeText: '苹果' })).toBe(true);
+      expect(matchSentenceListFilter(item, 0, { ...baseFilter, freeText: 's-7' })).toBe(true);
+      expect(matchSentenceListFilter(item, 0, { ...baseFilter, freeText: 'banana' })).toBe(false);
+    });
+
+    it('each condition honors its operator against the chosen field, case-folded', () => {
+      // Dialog-emitted values arrive folded; the row fields fold in the predicate.
+      expect(matchSentenceListFilter(item, 0, filterWith(cond('ensent', FilterOperation.BeginsWith, 'apple pie')))).toBe(true);
+      expect(matchSentenceListFilter(item, 0, filterWith(cond('ensent', FilterOperation.BeginsWith, 'pie')))).toBe(false);
+      expect(matchSentenceListFilter(item, 0, filterWith(cond('ensent', FilterOperation.EndsWith, 'sweet.')))).toBe(true);
+      expect(matchSentenceListFilter(item, 0, filterWith(cond('ensent', FilterOperation.Equal, 'apple pie is sweet.')))).toBe(true);
+      expect(matchSentenceListFilter(item, 0, filterWith(cond('cnsent', FilterOperation.Contains, '苹果')))).toBe(true);
+      // ensent field only: the Chinese sentence must not match an 'ensent' condition.
+      expect(matchSentenceListFilter(item, 0, filterWith(cond('ensent', FilterOperation.Contains, '苹果')))).toBe(false);
+    });
+
+    it('ANDs multiple conditions across fields', () => {
+      expect(
+        matchSentenceListFilter(item, 0, filterWith(
+          cond('ensent', FilterOperation.BeginsWith, 'apple'),
+          cond('cnsent', FilterOperation.EndsWith, '。')
+        ))
+      ).toBe(true);
+      expect(
+        matchSentenceListFilter(item, 0, filterWith(
+          cond('ensent', FilterOperation.BeginsWith, 'apple'),
+          cond('cnsent', FilterOperation.EndsWith, '？')
+        ))
+      ).toBe(false);
+    });
+
+    it('ANDs rating conditions with unrated (0) semantics', () => {
+      expect(
+        matchSentenceListFilter(item, 3, filterWith(
+          cond('ensent', FilterOperation.Contains, 'pie'),
+          cond('rating', FilterOperation.GreaterOrEqual, 3)
+        ))
+      ).toBe(true);
+      expect(matchSentenceListFilter(item, 2, filterWith(cond('rating', FilterOperation.GreaterOrEqual, 3)))).toBe(false);
+      // Unrated rows carry 0 and compare numerically.
+      expect(matchSentenceListFilter(item, 0, filterWith(cond('rating', FilterOperation.LessThan, 1)))).toBe(true);
+      expect(matchSentenceListFilter(item, 0, filterWith(cond('rating', FilterOperation.Equal, 0)))).toBe(true);
+      // Between is inclusive on both bounds (as the dialog's editor emits).
+      const between = (low: number, high: number) => ({
+        property: 'rating',
+        operation: FilterOperation.Between,
+        lowValue: low,
+        highValue: high,
+      });
+      expect(matchSentenceListFilter(item, 3, filterWith(between(2, 4)))).toBe(true);
+      expect(matchSentenceListFilter(item, 0, filterWith(between(0, 1)))).toBe(true);
+      expect(matchSentenceListFilter(item, 5, filterWith(between(2, 4)))).toBe(false);
+    });
+
+    it('evaluates nested AND/OR groups (SQL-WHERE nesting)', () => {
+      const group: SentenceListFilter = {
+        freeText: '',
+        root: {
+          join: FilterJoinType.AND,
+          conditions: [
+            cond('ensent', FilterOperation.Contains, 'pie'),
+            {
+              join: FilterJoinType.OR,
+              conditions: [
+                cond('cnsent', FilterOperation.Contains, '香蕉'),
+                cond('rating', FilterOperation.GreaterOrEqual, 2),
+              ],
+            },
+          ],
+        },
+      };
+      expect(matchSentenceListFilter(item, 2, group)).toBe(true);
+      expect(matchSentenceListFilter(item, 1, group)).toBe(false);
+    });
+
+    it('ANDs free text with the definition', () => {
+      expect(
+        matchSentenceListFilter(item, 0, {
+          freeText: 'apple',
+          root: { join: FilterJoinType.AND, conditions: [cond('cnsent', FilterOperation.Contains, '香蕉')] },
+        })
+      ).toBe(false);
+      expect(
+        matchSentenceListFilter(item, 0, {
+          freeText: 'apple',
+          root: { join: FilterJoinType.AND, conditions: [cond('cnsent', FilterOperation.Contains, '苹果')] },
+        })
+      ).toBe(true);
+    });
+  });
+
+  describe('buildSentenceQuizQuestions', () => {
+    const pool = [
+      { ensent: 'Apple pie is sweet.', cnsent: '苹果派很甜。' },
+      { ensent: 'The sky is blue.', cnsent: '天空是蓝色的。' },
+      { ensent: 'Cats like fish.', cnsent: '猫喜欢鱼。' },
+      { ensent: 'Dogs bark loudly.', cnsent: '狗大声吠叫。' },
+    ];
+
+    it('builds one cloze question per item with the answer at answerIndex', () => {
+      const questions = buildSentenceQuizQuestions([pool[0]], pool);
+      expect(questions.length).toBe(1);
+      const q = questions[0];
+      expect(q.ensent).toBe(pool[0].ensent);
+      expect(q.cnsent).toBe(pool[0].cnsent);
+
+      // Exactly one blank in the prompt; restoring it yields the sentence.
+      expect(q.prompt.split(SENTENCE_QUIZ_BLANK).length - 1).toBe(1);
+      expect(q.prompt.replace(SENTENCE_QUIZ_BLANK, 'x').split(/\s+/).length)
+        .toBe(pool[0].ensent.trim().split(/\s+/).length);
+
+      // The answer is a lowercase word from the sentence, never its first
+      // (capitalized) token, so casing cannot leak it.
+      const answer = q.options[q.answerIndex];
+      expect(answer).toMatch(/^[a-z]+$/);
+      expect(q.ensent.toLowerCase()).toContain(answer);
+      expect(q.ensent.trim().split(/\s+/)[0].toLowerCase()).not.toBe(answer);
+    });
+
+    it('draws distinct distractors from pool words', () => {
+      const questions = buildSentenceQuizQuestions([pool[0]], pool);
+      const q = questions[0];
+      expect(q.options.length).toBeGreaterThanOrEqual(2);
+      const lowered = q.options.map(o => o.toLowerCase());
+      expect(new Set(lowered).size).toBe(q.options.length);
+      for (const option of q.options) {
+        expect(pool.some(p => p.ensent.toLowerCase().includes(option))).toBe(true);
+      }
+    });
+
+    it('treats words seen capitalized mid-sentence as names, even lowercase', () => {
+      const namePool = [
+        { ensent: 'She met Tom yesterday.', cnsent: '她昨天遇到了汤姆。' },
+        { ensent: 'A tom cat sat on the mat.', cnsent: '一只猫坐在垫子上。' },
+      ];
+
+      const questions = buildSentenceQuizQuestions([namePool[1]], namePool);
+
+      expect(questions.length).toBe(1);
+      const lowered = questions[0].options.map(o => o.toLowerCase());
+      expect(lowered).not.toContain('tom');
+      expect(lowered[questions[0].answerIndex]).not.toBe('tom');
+    });
+
+    it('skips items without a blankable word', () => {
+      const questions = buildSentenceQuizQuestions([{ ensent: 'Hello', cnsent: '你好。' }], pool);
+      expect(questions.length).toBe(0);
+    });
+
+    it('skips items whose pool offers no distinct distractor', () => {
+      const questions = buildSentenceQuizQuestions(
+        [{ ensent: 'To be or not', cnsent: '存还是亡。' }],
+        [{ ensent: 'To be or not', cnsent: '存还是亡。' }, { ensent: 'Do it', cnsent: '做吧。' }]
+      );
+      expect(questions.length).toBe(0);
+    });
+  });
+
+  describe('normalizeSentenceAnswer', () => {
+    it('trims and lowercases', () => {
+      expect(normalizeSentenceAnswer('  Hello World. ')).toBe('hello world');
+    });
+
+    it('strips trailing runs of EN or CN sentence punctuation', () => {
+      expect(normalizeSentenceAnswer('苹果派很甜。')).toBe('苹果派很甜');
+      expect(normalizeSentenceAnswer('Really?!')).toBe('really');
+      expect(normalizeSentenceAnswer('Wait...')).toBe('wait');
+    });
+
+    it('collapses internal whitespace', () => {
+      expect(normalizeSentenceAnswer('a   b\t c')).toBe('a b c');
+    });
+  });
+});
diff --git a/src/app/interfaces/sentence.ts b/src/app/interfaces/sentence.ts
new file mode 100644
index 0000000..99f1238
--- /dev/null
+++ b/src/app/interfaces/sentence.ts
@@ -0,0 +1,308 @@
+import {
+  FilterJoinType,
+  FilterOperation,
+  FilterUtility,
+  FisherYatesShuffle,
+  type IFilterDefinition,
+} from 'actslib';
+
+import { hasActiveFilterDefinition } from "../shared/filter-dialog/filter-dialog-model";
+import type { FilterableProperty } from "../shared/filter-dialog/filter-dialog-model";
+import { pickWeighted } from "../shared/utils/shuffle";
+
+// ── Filter-bar schema (shared filter dialog) ───────────────────────────────
+//
+// The sentence list filter is edited by SharedFilterDialogComponent; its seed
+// and result are actslib `IFilterDefinition`, so this page keeps no tree model
+// of its own (see docs/reusable-filter-dialog-design.md).
+
+/** actslib string comparisons are case-sensitive while the page matches
+ *  case-insensitively — the dialog folds emitted text values (this hook) and
+ *  `matchSentenceListFilter` folds the row fields the same way. */
+const foldSentenceText = (value: string | number): string => String(value).trim().toLowerCase();
+
+const SENTENCE_MATCH_OPERATIONS: FilterOperation[] = [
+  FilterOperation.BeginsWith,
+  FilterOperation.Contains,
+  FilterOperation.Equal,
+  FilterOperation.EndsWith,
+];
+
+/**
+ * Sentence's filterable properties: the two text columns plus the per-user
+ * rating. Lexicographic string comparisons are not offered (the same call the
+ * word/Chinese pages make). `rating` is not a row field — the predicate passes
+ * it in the synthesized target (see `matchSentenceListFilter`); unrated
+ * sentences carry 0 and compare numerically.
+ */
+export const SENTENCE_FILTER_PROPERTIES: FilterableProperty[] = [
+  {
+    key: 'ensent',
+    labelKey: 'english',
+    kind: 'string',
+    operations: SENTENCE_MATCH_OPERATIONS,
+    prepareValue: foldSentenceText,
+  },
+  {
+    key: 'cnsent',
+    labelKey: 'chinese',
+    kind: 'string',
+    operations: SENTENCE_MATCH_OPERATIONS,
+    prepareValue: foldSentenceText,
+  },
+  {
+    key: 'rating',
+    labelKey: 'rating',
+    kind: 'number',
+    operations: [
+      FilterOperation.GreaterOrEqual,
+      FilterOperation.GreaterThan,
+      FilterOperation.Equal,
+      FilterOperation.LessOrEqual,
+      FilterOperation.LessThan,
+      FilterOperation.Between,
+    ],
+    numberRange: { min: 0, max: 5 },
+  },
+];
+
+/** A fresh (empty) filter definition: matches everything, shown as "new filter". */
+export const emptySentenceFilterDefinition = (): IFilterDefinition => ({
+  join: FilterJoinType.AND,
+  conditions: [],
+});
+
+/**
+ * Combined criteria of the sentence list filter bar. `freeText` applies live
+ * (cross-field substring over id/ensent/cnsent); `root` is the actslib
+ * condition definition produced by the shared filter dialog. The definition
+ * and freeText are ANDed. Condition values arrive case-folded (the dialog's
+ * `prepareValue` hooks on `SENTENCE_FILTER_PROPERTIES`).
+ */
+export interface SentenceListFilter {
+  /** Cross-field substring search over id/ensent/cnsent (legacy behaviour). */
+  freeText: string;
+  /** actslib filter definition (text/rating leaves and nested AND/OR groups). */
+  root: IFilterDefinition;
+}
+
+/**
+ * True when the filter carries nothing: blank freeText and no condition
+ * anywhere in the definition (an empty root, or only empty sub-groups).
+ */
+export const isSentenceListFilterEmpty = (filter: SentenceListFilter): boolean =>
+  filter.freeText.trim().length === 0 && !hasActiveFilterDefinition(filter.root);
+
+/**
+ * Single matching rule for the sentence list filter bar: freeText AND the
+ * actslib definition. All filtering decisions flow through here: the table
+ * predicate calls it and nothing else grows private matching logic.
+ */
+export const matchSentenceListFilter = (
+  item: { id?: string; ensent: string; cnsent: string },
+  rating: number,
+  filter: SentenceListFilter
+): boolean => {
+  const freeText = filter.freeText.trim().toLowerCase();
+  if (freeText.length > 0) {
+    // Mirrors the old default MatTableDataSource predicate: the row's
+    // id/ensent/cnsent values concatenated, lowercased, substring-matched.
+    const haystack = `${item.id ?? ''}${item.ensent}${item.cnsent}`.toLowerCase();
+    if (!haystack.includes(freeText)) {
+      return false;
+    }
+  }
+
+  // FilterUtility compares strings case-sensitively, so the condition values
+  // are folded by the dialog's prepareValue hooks and the row's text fields
+  // fold here. The rating rides along as a numeric property: it lives in the
+  // page's rating map, not on the row; unrated sentences pass 0 and compare
+  // numerically, like unrated rows on every other list page.
+  const target = {
+    ensent: item.ensent.toLowerCase(),
+    cnsent: item.cnsent.toLowerCase(),
+    rating,
+  };
+  return FilterUtility.MatchFilter(target, filter.root);
+};
+
+/** Marker replacing the blanked-out word in a cloze question's prompt. */
+export const SENTENCE_QUIZ_BLANK = '_____';
+
+/**
+ * One generated cloze (fill-in-the-blank) question of a sentence quiz: one
+ * English word is blanked out of the EN sentence (`prompt`) and must be
+ * picked from `options`; the CN sentence is the meaning hint.
+ */
+export interface SentenceQuizQuestion {
+  ensent: string;
+  cnsent: string;
+  /** The EN sentence with the blanked word replaced by SENTENCE_QUIZ_BLANK. */
+  prompt: string;
+  /** Candidate answers (2-4 entries), displayed in this order. */
+  options: string[];
+  /** Index into `options` of the correct answer. */
+  answerIndex: number;
+}
+
+/** Per-sentence outcome of a finished sentence quiz. */
+export interface SentenceQuizQueueResult {
+  ensent: string;
+  cnsent: string;
+  correct: boolean;
+}
+
+/** Minimum bare-word length for a cloze blank candidate or distractor. */
+const CLOZE_MIN_WORD_LENGTH = 3;
+/** Distractors gathered per cloze question. */
+const CLOZE_DISTRACTOR_COUNT = 3;
+
+/**
+ * Strip leading/trailing non-letter characters from one whitespace token;
+ * internal apostrophes survive ("don't" stays whole).
+ */
+const stripTokenPunctuation = (token: string): string =>
+  token.replace(/^[^\p{L}']+|[^\p{L}']+$/gu, '');
+
+/**
+ * Whether a bare word can serve as a cloze blank/answer: long enough and
+ * lowercase-initial, so the casing of pool distractors never leaks the answer
+ * (sentence-initial words and capitalized tokens are excluded by this).
+ */
+const isClozeWord = (word: string): boolean =>
+  word.length >= CLOZE_MIN_WORD_LENGTH && /^[a-z]/.test(word);
+
+/**
+ * Words appearing capitalized at a non-initial position anywhere in the pool
+ * are treated as proper nouns (names): they are never blanked nor offered as
+ * options, even when the same word occurs lowercase in another sentence.
+ */
+const collectNameWords = (pool: { ensent: string }[]): Set<string> => {
+  const names = new Set<string>();
+  for (const sentence of pool) {
+    const tokens = sentence.ensent.trim().split(/\s+/);
+    for (let i = 1; i < tokens.length; i++) {
+      const word = stripTokenPunctuation(tokens[i]);
+      if (/^[A-Z]/.test(word)) {
+        names.add(word.toLowerCase());
+      }
+    }
+  }
+  return names;
+};
+
+/** Qualifying bare words of a sentence with their token indexes. */
+const clozeCandidates = (
+  ensent: string,
+  nameWords: ReadonlySet<string>
+): { word: string; index: number }[] => {
+  const tokens = ensent.trim().split(/\s+/);
+  const candidates: { word: string; index: number }[] = [];
+  // Index 0 (sentence-initial) is excluded: its capitalization would stand
+  // out among lowercase distractors.
+  for (let i = 1; i < tokens.length; i++) {
+    const word = stripTokenPunctuation(tokens[i]);
+    if (isClozeWord(word) && !nameWords.has(word.toLowerCase())) {
+      candidates.push({ word, index: i });
+    }
+  }
+  return candidates;
+};
+
+/**
+ * Build cloze questions for a sentence quiz: per item, one qualifying EN word
+ * is blanked out of the sentence and must be picked from candidates drawn
+ * from the pool's words. The blank is chosen randomly with a bias towards
+ * longer (content) words; words seen capitalized mid-sentence anywhere in the
+ * pool count as names and are never used. Items without a blankable word, or
+ * whose pool yields no distinct distractor, are skipped; options end up 2-4
+ * entries.
+ */
+export const buildSentenceQuizQuestions = (
+  items: { ensent: string; cnsent: string }[],
+  pool: { ensent: string; cnsent: string }[]
+): SentenceQuizQuestion[] => {
+  const nameWords = collectNameWords(pool);
+  const poolWords = FisherYatesShuffle(
+    pool.flatMap(s => clozeCandidates(s.ensent, nameWords).map(c => c.word))
+  );
+  const questions: SentenceQuizQuestion[] = [];
+  for (const item of items) {
+    // Longer words weigh more, so the blank lands on a content word more
+    // often than on a short filler one.
+    const answer = pickWeighted(clozeCandidates(item.ensent, nameWords), c => c.word.length);
+    if (!answer) {
+      continue;
+    }
+
+    const distractors: string[] = [];
+    const seen = new Set<string>([answer.word.toLowerCase()]);
+    for (const word of poolWords) {
+      const key = word.toLowerCase();
+      if (seen.has(key)) {
+        continue;
+      }
+      seen.add(key);
+      distractors.push(word);
+      if (distractors.length === CLOZE_DISTRACTOR_COUNT) {
+        break;
+      }
+    }
+    // Every pool word matches the answer: no real choice.
+    if (distractors.length === 0) {
+      continue;
+    }
+
+    const tokens = item.ensent.trim().split(/\s+/);
+    tokens[answer.index] = SENTENCE_QUIZ_BLANK;
+    const options = FisherYatesShuffle([answer.word, ...distractors]);
+    questions.push({
+      ensent: item.ensent,
+      cnsent: item.cnsent,
+      prompt: tokens.join(' '),
+      options,
+      answerIndex: options.indexOf(answer.word),
+    });
+  }
+  return questions;
+};
+
+/** One item of a sentence review session: the sentence pair and its live rating. */
+export interface SentenceReviewQueueItem {
+  ensent: string;
+  cnsent: string;
+  rating: number;
+  /** Pre-hashed rating item key (ratingItemKey of the sentence id), when rated. */
+  itemId?: number;
+}
+
+/** Review options of the sentence page. */
+export interface SentenceReviewOption {
+  countOfItems: number;
+  disableVoice: boolean;
+}
+
+/** Quiz options of the sentence page. */
+export interface SentenceQuizOption {
+  countOfItems: number;
+}
+
+/** Per-sentence outcome of a finished typing (translation) session. */
+export interface SentenceTypingResult {
+  ensent: string;
+  cnsent: string;
+  inputted: string;
+  correct: boolean;
+}
+
+/**
+ * Normalize a typed sentence for grading: trim, strip any run of trailing
+ * sentence punctuation (EN or CN), lowercase, collapse internal whitespace.
+ * The normalized input and target are then compared for equality.
+ */
+export const normalizeSentenceAnswer = (text: string): string =>
+  text
+    .trim()
+    .replace(/[.?!。？！]+$/u, '')
+    .toLowerCase()
+    .replace(/\s+/g, ' ');
diff --git a/src/app/interfaces/translate-data.ts b/src/app/interfaces/translate-data.ts
index 5b08d6e..8a2aaf6 100644
--- a/src/app/interfaces/translate-data.ts
+++ b/src/app/interfaces/translate-data.ts
@@ -44,7 +44,6 @@ export interface TranslateExercisePrintOption {
 }
 
 export interface TranslateExerciseOption {
-  allowEmptyAnswer: boolean;
   countOfItems: number;
   direction: TranslateDirectionEnum;
 }
diff --git a/src/app/interfaces/ui-common.spec.ts b/src/app/interfaces/ui-common.spec.ts
deleted file mode 100644
index 98b9870..0000000
--- a/src/app/interfaces/ui-common.spec.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { RatingOperatorEnum, matchRating } from './ui-common';
-
-describe('ui-common.ts', () => {
-  describe('matchRating', () => {
-    it('Equals matches only the exact rating, including unrated (0)', () => {
-      expect(matchRating(3, RatingOperatorEnum.Equals, 3)).toBe(true);
-      expect(matchRating(2, RatingOperatorEnum.Equals, 3)).toBe(false);
-      expect(matchRating(0, RatingOperatorEnum.Equals, 0)).toBe(true);
-    });
-
-    it('GreaterThan / LargerOrEquals compare against the value', () => {
-      expect(matchRating(4, RatingOperatorEnum.GreaterThan, 3)).toBe(true);
-      expect(matchRating(3, RatingOperatorEnum.GreaterThan, 3)).toBe(false);
-      expect(matchRating(3, RatingOperatorEnum.LargerOrEquals, 3)).toBe(true);
-      expect(matchRating(2, RatingOperatorEnum.LargerOrEquals, 3)).toBe(false);
-    });
-
-    it('LessThan / LessOrEquals compare against the value and include unrated (0)', () => {
-      expect(matchRating(2, RatingOperatorEnum.LessThan, 3)).toBe(true);
-      expect(matchRating(3, RatingOperatorEnum.LessThan, 3)).toBe(false);
-      expect(matchRating(0, RatingOperatorEnum.LessThan, 3)).toBe(true);
-      expect(matchRating(0, RatingOperatorEnum.LessThan, 1)).toBe(true);
-      expect(matchRating(1, RatingOperatorEnum.LessThan, 1)).toBe(false);
-      expect(matchRating(3, RatingOperatorEnum.LessOrEquals, 3)).toBe(true);
-      expect(matchRating(0, RatingOperatorEnum.LessOrEquals, 3)).toBe(true);
-    });
-  });
-});
diff --git a/src/app/interfaces/ui-common.ts b/src/app/interfaces/ui-common.ts
index 9a5b609..859a97e 100644
--- a/src/app/interfaces/ui-common.ts
+++ b/src/app/interfaces/ui-common.ts
@@ -17,15 +17,6 @@ export enum SelectionModeEnum {
 }
 export type SelectionModeEnumKeys = keyof typeof SelectionModeEnum;
 
-export enum RatingOperatorEnum {
-  'Equals' = 0,
-  'GreaterThan' = 1,
-  'LessThan' = 2,
-  'LargerOrEquals' = 5,
-  'LessOrEquals' = 6,
-}
-export type RatingOperatorEnumKeys = keyof typeof RatingOperatorEnum;
-
 export const getSelectionModeName = (itemType: SelectionModeEnum): string => {
   switch (itemType) {
     case SelectionModeEnum.ByID:
@@ -47,53 +38,6 @@ export const getSelectionModeNames = (): Map<SelectionModeEnum, string> => {
   return map;
 };
 
-export const getRatingOperatorName = (operator: RatingOperatorEnum): string => {
-  switch (operator) {
-    case RatingOperatorEnum.Equals:
-      return 'Equals';
-    case RatingOperatorEnum.GreaterThan:
-      return 'Greater Than';
-    case RatingOperatorEnum.LessThan:
-      return 'Less Than';
-    case RatingOperatorEnum.LargerOrEquals:
-      return 'Larger or Equals';
-    case RatingOperatorEnum.LessOrEquals:
-      return 'Less or Equals';
-    default:
-      return 'Unknown';
-  }
-};
-
-/**
- * Shared rating comparison used by the vocabulary list filter bar (rating
- * conditions) and the Select-by-Rating dialogs, so all rating matching goes
- * through one place. An unrated word has rating 0 and is compared numerically
- * like any other value: `< 1` / `<= 0` match unrated words, `>= 1` matches any
- * rated word. (Ratings are 1–5, so `< 1` is equivalent to the former "HasNone"
- * and `>= 1` to the former "HasAny", which is why those operators were
- * dropped.)
- */
-export const matchRating = (
-  rating: number,
-  operator: RatingOperatorEnum,
-  value: number
-): boolean => {
-  switch (operator) {
-    case RatingOperatorEnum.Equals:
-      return rating === value;
-    case RatingOperatorEnum.GreaterThan:
-      return rating > value;
-    case RatingOperatorEnum.LargerOrEquals:
-      return rating >= value;
-    case RatingOperatorEnum.LessThan:
-      return rating < value;
-    case RatingOperatorEnum.LessOrEquals:
-      return rating <= value;
-    default:
-      return false;
-  }
-};
-
 // Detect if a string contains Chinese characters
 export const hasChinese = (str: string): boolean => {
   return /[\u4e00-\u9fa5]/.test(str);
diff --git a/src/app/interfaces/vocabulary.spec.ts b/src/app/interfaces/vocabulary.spec.ts
index 43cc62a..fc83e24 100644
--- a/src/app/interfaces/vocabulary.spec.ts
+++ b/src/app/interfaces/vocabulary.spec.ts
@@ -1,54 +1,96 @@
-import { RatingOperatorEnum } from './ui-common';
+import { FilterJoinType, FilterOperation } from 'actslib';
+
+import type { IFilterCondition, IFilterDefinition } from 'actslib';
+
 import {
+  VOCABULARY_FILTER_PROPERTIES,
+  VOCABULARY_IS_PHRASE,
+  VOCABULARY_UPLOAD_MAX_ITEMS,
   buildVocabularyQuizQuestions,
+  emptyVocabularyFilterDefinition,
   isVocabularyListFilterEmpty,
   matchVocabularyListFilter,
-  summarizeWordFilter,
-  summarizeRatingFilter,
+  parseVocabularyUpload,
   type VocabularyListFilter,
-  type WordMatchOperator,
 } from './vocabulary';
 
 const baseFilter: VocabularyListFilter = {
   freeText: '',
-  wordConditions: [],
-  ratingConditions: [],
+  root: emptyVocabularyFilterDefinition(),
 };
 
 const item = { id: 7, enword: 'Apple Pie', cnword: '苹果派' };
 
+// Definition builders keep the filter tests readable. Condition values are
+// written pre-folded (lower-cased) — the dialog's prepareValue hooks fold them
+// at emit time, and matchVocabularyListFilter folds the row fields.
+const cond = (
+  property: string,
+  operation: FilterOperation,
+  lowValue: string | number,
+  highValue?: string | number
+): IFilterCondition =>
+  highValue === undefined
+    ? { property, operation, lowValue }
+    : { property, operation, lowValue, highValue };
+const andD = (...conditions: Array<IFilterCondition | IFilterDefinition>): IFilterDefinition => ({
+  join: FilterJoinType.AND,
+  conditions,
+});
+const orD = (...conditions: Array<IFilterCondition | IFilterDefinition>): IFilterDefinition => ({
+  join: FilterJoinType.OR,
+  conditions,
+});
+
 describe('vocabulary.ts', () => {
+  describe('VOCABULARY_FILTER_PROPERTIES (schema)', () => {
+    it('offers the two text columns and the rating number', () => {
+      expect(VOCABULARY_FILTER_PROPERTIES.map(p => p.key)).toEqual(['enword', 'cnword', 'rating']);
+      expect(VOCABULARY_FILTER_PROPERTIES[2].kind).toBe('number');
+      // The rating whitelist includes Between (the full numeric operator set).
+      expect(VOCABULARY_FILTER_PROPERTIES[2].operations).toContain(FilterOperation.Between);
+    });
+
+    it('offers the phrase custom operator only for the English word', () => {
+      expect(VOCABULARY_FILTER_PROPERTIES[0].customOperators).toEqual([VOCABULARY_IS_PHRASE]);
+      expect(VOCABULARY_FILTER_PROPERTIES[1].customOperators).toBeUndefined();
+    });
+
+    it('isPhrase emits Contains-of-space and recognizes it back (round-trip fold)', () => {
+      const emitted = VOCABULARY_IS_PHRASE.emit('enword');
+      expect(emitted).toEqual({ property: 'enword', operation: FilterOperation.Contains, lowValue: ' ' });
+      expect(VOCABULARY_IS_PHRASE.recognize(emitted)).toBe(true);
+      expect(
+        VOCABULARY_IS_PHRASE.recognize({ property: 'enword', operation: FilterOperation.Contains, lowValue: 'ap' })
+      ).toBe(false);
+    });
+
+    it('case-folds emitted text values via the prepareValue hook', () => {
+      const enword = VOCABULARY_FILTER_PROPERTIES[0];
+      expect(enword.prepareValue?.('  AP')).toBe('ap');
+    });
+  });
+
   describe('isVocabularyListFilterEmpty', () => {
-    it('is empty when no condition is set', () => {
+    it('is empty when the definition carries no condition', () => {
       expect(isVocabularyListFilterEmpty({ ...baseFilter })).toBe(true);
     });
 
-    it('is not empty when any condition is set', () => {
+    it('is not empty when free text or a (nested) condition is set', () => {
       expect(isVocabularyListFilterEmpty({ ...baseFilter, freeText: 'a' })).toBe(false);
       expect(
-        isVocabularyListFilterEmpty({ ...baseFilter, wordConditions: [{ operator: 'contains', text: 'a' }] })
+        isVocabularyListFilterEmpty({ ...baseFilter, root: andD(cond('enword', FilterOperation.Contains, 'a')) })
       ).toBe(false);
       expect(
         isVocabularyListFilterEmpty({
           ...baseFilter,
-          ratingConditions: [{ operator: RatingOperatorEnum.Equals, value: 3 }],
+          root: orD(andD(cond('rating', FilterOperation.Equal, 3))),
         })
       ).toBe(false);
     });
 
-    it('treats a blank-text word condition as inactive (empty)', () => {
-      expect(
-        isVocabularyListFilterEmpty({ ...baseFilter, wordConditions: [{ operator: 'contains', text: '   ' }] })
-      ).toBe(true);
-    });
-
-    it('treats a phrase condition as active even with blank text', () => {
-      expect(
-        isVocabularyListFilterEmpty({ ...baseFilter, wordConditions: [{ operator: 'isPhrase', text: '' }] })
-      ).toBe(false);
-      expect(
-        isVocabularyListFilterEmpty({ ...baseFilter, wordConditions: [{ operator: 'notPhrase', text: '   ' }] })
-      ).toBe(false);
+    it('treats a definition of only empty sub-groups as empty', () => {
+      expect(isVocabularyListFilterEmpty({ ...baseFilter, root: andD(orD()) })).toBe(true);
     });
   });
 
@@ -64,110 +106,145 @@ describe('vocabulary.ts', () => {
       expect(matchVocabularyListFilter(item, 0, { ...baseFilter, freeText: 'banana' })).toBe(false);
     });
 
-    it('each word condition honors its operator against enword only', () => {
-      expect(
-        matchVocabularyListFilter(item, 0, { ...baseFilter, wordConditions: [{ operator: 'startsWith', text: 'apple' }] })
-      ).toBe(true);
+    it('each enword condition honors its operator against enword only', () => {
+      const withWord = (operation: FilterOperation, value: string): VocabularyListFilter => ({
+        ...baseFilter,
+        root: andD(cond('enword', operation, value)),
+      });
+      expect(matchVocabularyListFilter(item, 0, withWord(FilterOperation.BeginsWith, 'apple'))).toBe(true);
+      expect(matchVocabularyListFilter(item, 0, withWord(FilterOperation.BeginsWith, 'pie'))).toBe(false);
+      expect(matchVocabularyListFilter(item, 0, withWord(FilterOperation.Contains, 'le pi'))).toBe(true);
+      expect(matchVocabularyListFilter(item, 0, withWord(FilterOperation.EndsWith, 'pie'))).toBe(true);
+      // property 'enword': the Chinese translation must not match.
+      expect(matchVocabularyListFilter(item, 0, withWord(FilterOperation.Contains, '苹果'))).toBe(false);
+    });
+
+    it('matches case-insensitively: folded values against the folded row fields', () => {
+      // 'Apple Pie' folds to 'apple pie' in the predicate; the dialog folds the
+      // condition value at emit time, so a lower-case condition matches.
       expect(
-        matchVocabularyListFilter(item, 0, { ...baseFilter, wordConditions: [{ operator: 'startsWith', text: 'pie' }] })
-      ).toBe(false);
+        matchVocabularyListFilter(item, 0, { ...baseFilter, root: andD(cond('enword', FilterOperation.Contains, 'APPLE')) })
+      ).toBe(false); // uppercase condition value is NOT folded here (the dialog folds at emit)
       expect(
-        matchVocabularyListFilter(item, 0, { ...baseFilter, wordConditions: [{ operator: 'contains', text: 'le pi' }] })
+        matchVocabularyListFilter(item, 0, { ...baseFilter, root: andD(cond('enword', FilterOperation.Contains, 'apple')) })
       ).toBe(true);
+    });
+
+    it('cnword conditions match the Chinese explanation, not the English word', () => {
       expect(
-        matchVocabularyListFilter(item, 0, { ...baseFilter, wordConditions: [{ operator: 'endsWith', text: 'PIE' }] })
+        matchVocabularyListFilter(item, 0, { ...baseFilter, root: andD(cond('cnword', FilterOperation.Contains, '苹果')) })
       ).toBe(true);
-      // enword only: the Chinese translation must not match a word condition.
       expect(
-        matchVocabularyListFilter(item, 0, { ...baseFilter, wordConditions: [{ operator: 'contains', text: '苹果' }] })
+        matchVocabularyListFilter(item, 0, { ...baseFilter, root: andD(cond('cnword', FilterOperation.BeginsWith, '派')) })
+      ).toBe(false);
+      // A cnword condition must not match against enword.
+      expect(
+        matchVocabularyListFilter(item, 0, { ...baseFilter, root: andD(cond('cnword', FilterOperation.Contains, 'apple')) })
       ).toBe(false);
     });
 
-    it('ANDs multiple word conditions', () => {
+    it('ANDs conditions across both fields', () => {
       const filter: VocabularyListFilter = {
         ...baseFilter,
-        wordConditions: [
-          { operator: 'startsWith', text: 'apple' },
-          { operator: 'endsWith', text: 'pie' },
-        ],
+        root: andD(
+          cond('enword', FilterOperation.BeginsWith, 'apple'),
+          cond('cnword', FilterOperation.EndsWith, '派')
+        ),
       };
       expect(matchVocabularyListFilter(item, 0, filter)).toBe(true);
       expect(
         matchVocabularyListFilter(item, 0, {
           ...filter,
-          wordConditions: [
-            { operator: 'startsWith', text: 'apple' },
-            { operator: 'endsWith', text: 'ing' },
-          ],
+          root: andD(
+            cond('enword', FilterOperation.BeginsWith, 'apple'),
+            cond('cnword', FilterOperation.EndsWith, '果')
+          ),
         })
       ).toBe(false);
     });
 
-    it('skips blank-text word conditions', () => {
-      expect(
-        matchVocabularyListFilter(item, 0, {
-          ...baseFilter,
-          wordConditions: [{ operator: 'contains', text: '' }, { operator: 'endsWith', text: 'pie' }],
-        })
-      ).toBe(true);
+    it('the phrase operator matches only words containing a space', () => {
+      const single = { id: 8, enword: 'Apple', cnword: '苹果' };
+      // VOCABULARY_IS_PHRASE emits Contains of a space — matching a phrase.
+      const phraseFilter: VocabularyListFilter = { ...baseFilter, root: andD(VOCABULARY_IS_PHRASE.emit('enword')) };
+      expect(matchVocabularyListFilter(item, 0, phraseFilter)).toBe(true);
+      expect(matchVocabularyListFilter(single, 0, phraseFilter)).toBe(false);
     });
 
-    it('isPhrase matches only enwords containing a space, notPhrase the reverse', () => {
-      const single = { id: 8, enword: 'Apple', cnword: '苹果' };
-      expect(
-        matchVocabularyListFilter(item, 0, { ...baseFilter, wordConditions: [{ operator: 'isPhrase', text: '' }] })
-      ).toBe(true);
-      expect(
-        matchVocabularyListFilter(single, 0, { ...baseFilter, wordConditions: [{ operator: 'isPhrase', text: '' }] })
-      ).toBe(false);
-      expect(
-        matchVocabularyListFilter(item, 0, { ...baseFilter, wordConditions: [{ operator: 'notPhrase', text: '' }] })
-      ).toBe(false);
-      expect(
-        matchVocabularyListFilter(single, 0, { ...baseFilter, wordConditions: [{ operator: 'notPhrase', text: '' }] })
-      ).toBe(true);
+    it('rating conditions compare numerically, unrated (0) included', () => {
+      const withRating = (operation: FilterOperation, value: number): VocabularyListFilter => ({
+        ...baseFilter,
+        root: andD(cond('rating', operation, value)),
+      });
+      expect(matchVocabularyListFilter(item, 5, withRating(FilterOperation.GreaterOrEqual, 4))).toBe(true);
+      expect(matchVocabularyListFilter(item, 4, withRating(FilterOperation.GreaterOrEqual, 4))).toBe(true);
+      expect(matchVocabularyListFilter(item, 3, withRating(FilterOperation.GreaterOrEqual, 4))).toBe(false);
+      // Unrated (0) words compare numerically: 0 < 2 is true.
+      expect(matchVocabularyListFilter(item, 0, withRating(FilterOperation.LessThan, 2))).toBe(true);
+      expect(matchVocabularyListFilter(item, 3, withRating(FilterOperation.Equal, 3))).toBe(true);
+      expect(matchVocabularyListFilter(item, 3, withRating(FilterOperation.GreaterThan, 3))).toBe(false);
+      expect(matchVocabularyListFilter(item, 3, withRating(FilterOperation.LessOrEqual, 3))).toBe(true);
+      // Between (inclusive on both bounds), as the dialog's two-input editor emits.
+      const between = (low: number, high: number): VocabularyListFilter => ({
+        ...baseFilter,
+        root: andD({ property: 'rating', operation: FilterOperation.Between, lowValue: low, highValue: high }),
+      });
+      expect(matchVocabularyListFilter(item, 3, between(2, 4))).toBe(true);
+      expect(matchVocabularyListFilter(item, 4, between(2, 4))).toBe(true);
+      expect(matchVocabularyListFilter(item, 5, between(2, 4))).toBe(false);
     });
 
-    it('ANDs phrase conditions with text conditions', () => {
+    it('ORs cross-dimension leaves inside a group', () => {
       const filter: VocabularyListFilter = {
         ...baseFilter,
-        wordConditions: [
-          { operator: 'isPhrase', text: '' },
-          { operator: 'startsWith', text: 'apple' },
-        ],
+        root: orD(cond('enword', FilterOperation.BeginsWith, 'ban'), cond('rating', FilterOperation.Equal, 5)),
       };
-      expect(matchVocabularyListFilter(item, 0, filter)).toBe(true);
+      expect(matchVocabularyListFilter(item, 0, filter)).toBe(false);
+      expect(matchVocabularyListFilter(item, 5, filter)).toBe(true);
       expect(
-        matchVocabularyListFilter({ id: 8, enword: 'apple', cnword: '苹果' }, 0, filter)
-      ).toBe(false);
+        matchVocabularyListFilter({ id: 9, enword: 'banana', cnword: '香蕉' }, 0, filter)
+      ).toBe(true);
     });
 
-    it('rating conditions compare via the shared matchRating rule', () => {
+    it('evaluates (A OR B) AND C against the definition tree', () => {
       const filter: VocabularyListFilter = {
         ...baseFilter,
-        ratingConditions: [{ operator: RatingOperatorEnum.LargerOrEquals, value: 4 }],
+        root: andD(
+          orD(cond('enword', FilterOperation.BeginsWith, 'zzz'), cond('cnword', FilterOperation.Contains, '苹果')),
+          cond('rating', FilterOperation.GreaterOrEqual, 3)
+        ),
       };
-      expect(matchVocabularyListFilter(item, 5, filter)).toBe(true);
-      expect(matchVocabularyListFilter(item, 4, filter)).toBe(true);
-      expect(matchVocabularyListFilter(item, 3, filter)).toBe(false);
-      // Unrated (0) words compare numerically: 0 < 2 is true.
-      expect(
-        matchVocabularyListFilter(item, 0, {
-          ...baseFilter,
-          ratingConditions: [{ operator: RatingOperatorEnum.LessThan, value: 2 }],
-        })
-      ).toBe(true);
+      expect(matchVocabularyListFilter(item, 3, filter)).toBe(true);
+      expect(matchVocabularyListFilter(item, 2, filter)).toBe(false);
     });
 
-    it('ANDs free text, word and rating conditions', () => {
+    it('ANDs free text with the condition definition', () => {
       const filter: VocabularyListFilter = {
         freeText: '苹果',
-        wordConditions: [{ operator: 'startsWith', text: 'apple' }],
-        ratingConditions: [{ operator: RatingOperatorEnum.Equals, value: 5 }],
+        root: andD(cond('enword', FilterOperation.BeginsWith, 'apple'), cond('rating', FilterOperation.Equal, 5)),
       };
       expect(matchVocabularyListFilter(item, 5, filter)).toBe(true);
       expect(matchVocabularyListFilter(item, 4, filter)).toBe(false);
     });
+
+    it('evaluates a three-level tree (AND > OR > AND)', () => {
+      const filter: VocabularyListFilter = {
+        ...baseFilter,
+        root: andD(
+          orD(
+            andD(cond('cnword', FilterOperation.Contains, '苹果'), cond('enword', FilterOperation.BeginsWith, 'zzz')),
+            cond('rating', FilterOperation.LessThan, 1)
+          ),
+          cond('enword', FilterOperation.EndsWith, 'pie')
+        ),
+      };
+      // inner AND fails (no 'zzz'), but rating 0 < 1 makes the OR true; 'pie' AND holds.
+      expect(matchVocabularyListFilter(item, 0, filter)).toBe(true);
+      // banana: OR fails (no 苹果, rating 5 not < 1) AND 'pie' fails — two ways to lose.
+      expect(
+        matchVocabularyListFilter({ id: 9, enword: 'banana', cnword: '香蕉' }, 5, filter)
+      ).toBe(false);
+    });
   });
 
   describe('buildVocabularyQuizQuestions', () => {
@@ -247,82 +324,89 @@ describe('vocabulary.ts', () => {
     });
   });
 
-  describe('summarizeWordFilter', () => {
-    const label = (op: WordMatchOperator) =>
-      ({
-        startsWith: 'starts with',
-        contains: 'contains',
-        equal: 'equal',
-        endsWith: 'ends with',
-        isPhrase: 'is phrase',
-        notPhrase: 'not phrase',
-      }[op]);
 
-    it('returns empty string when there are no active conditions', () => {
-      expect(summarizeWordFilter([], label)).toBe('');
-      expect(summarizeWordFilter([{ operator: 'contains', text: '   ' }], label)).toBe('');
+  describe('parseVocabularyUpload', () => {
+    it('parses valid rows', () => {
+      const result = parseVocabularyUpload('[{"enword":"hello","cnword":"你好"}]');
+      expect(result).toEqual({
+        ok: true,
+        items: [{ enword: 'hello', cnword: '你好' }],
+        skippedCount: 0,
+        truncated: false,
+      });
     });
 
-    it('joins active conditions as "label value" with "; "', () => {
-      expect(
-        summarizeWordFilter(
-          [{ operator: 'startsWith', text: 'a' }, { operator: 'endsWith', text: 'ing' }],
-          label
-        )
-      ).toBe('starts with a; ends with ing');
+    it('rejects UTF-16 content (stray NUL bytes)', () => {
+      const text = '[' + String.fromCharCode(0) + ']';
+      expect(parseVocabularyUpload(text)).toEqual({ ok: false, reason: 'utf16' });
     });
 
-    it('skips blank-text rows but keeps the others', () => {
-      expect(
-        summarizeWordFilter(
-          [{ operator: 'contains', text: '' }, { operator: 'equal', text: 'cat' }],
-          label
-        )
-      ).toBe('equal cat');
+    it('strips a leading UTF-8 BOM before parsing', () => {
+      const text = String.fromCharCode(0xfeff) + '[{"enword":"hi","cnword":"嗨"}]';
+      const result = parseVocabularyUpload(text);
+      expect(result.ok).toBe(true);
     });
 
-    it('summarizes phrase conditions as the bare operator label', () => {
-      expect(
-        summarizeWordFilter(
-          [{ operator: 'isPhrase', text: '' }, { operator: 'startsWith', text: 'a' }],
-          label
-        )
-      ).toBe('is phrase; starts with a');
-      expect(summarizeWordFilter([{ operator: 'notPhrase', text: '' }], label)).toBe('not phrase');
+    it('reports malformed JSON as parse failure', () => {
+      expect(parseVocabularyUpload('{not json')).toEqual({ ok: false, reason: 'parse' });
     });
 
-    it('ellipsizes when the summary exceeds 40 characters', () => {
-      const long = 'x'.repeat(50);
-      const result = summarizeWordFilter([{ operator: 'contains', text: long }], label);
-      expect(result.length).toBe(40);
-      expect(result.endsWith('…')).toBe(true);
+    it('reports non-array payloads as not-array', () => {
+      expect(parseVocabularyUpload('{"enword":"a","cnword":"b"}')).toEqual({
+        ok: false,
+        reason: 'not-array',
+      });
     });
-  });
 
-  describe('summarizeRatingFilter', () => {
-    const symbolMap: Record<number, string> = {
-      [RatingOperatorEnum.LargerOrEquals]: '>=',
-      [RatingOperatorEnum.GreaterThan]: '>',
-      [RatingOperatorEnum.Equals]: '=',
-      [RatingOperatorEnum.LessOrEquals]: '<=',
-      [RatingOperatorEnum.LessThan]: '<',
-    };
-    const symbol = (op: RatingOperatorEnum): string => symbolMap[op] ?? '?';
+    it('skips rows that break the word contract and counts them', () => {
+      const result = parseVocabularyUpload(
+        JSON.stringify([
+          { enword: 'good', cnword: '好' },
+          { other: 1 },
+          { enword: 'a', cnword: '太短' },
+          { enword: 'no-cn' },
+          null,
+          'text',
+          { enword: 'also', cnword: '也' },
+        ])
+      );
+      expect(result).toEqual({
+        ok: true,
+        items: [
+          { enword: 'good', cnword: '好' },
+          { enword: 'also', cnword: '也' },
+        ],
+        skippedCount: 5,
+        truncated: false,
+      });
+    });
 
-    it('returns empty string for no conditions', () => {
-      expect(summarizeRatingFilter([], symbol)).toBe('');
+    it('skips rows whose fields exceed the length cap', () => {
+      const longEn = 'x'.repeat(501);
+      const result = parseVocabularyUpload(JSON.stringify([{ enword: longEn, cnword: '长' }]));
+      expect(result.ok && result.skippedCount === 1 && result.items.length === 0).toBe(true);
     });
 
-    it('joins conditions as "symbolvalue" with "; "', () => {
-      expect(
-        summarizeRatingFilter(
-          [
-            { operator: RatingOperatorEnum.LargerOrEquals, value: 3 },
-            { operator: RatingOperatorEnum.Equals, value: 5 },
-          ],
-          symbol
-        )
-      ).toBe('>=3; =5');
+    it('truncates at the item cap and flags it', () => {
+      const rows = Array.from({ length: VOCABULARY_UPLOAD_MAX_ITEMS + 2 }, (_, i) => ({
+        enword: `w${i}`,
+        cnword: `词${i}`,
+      }));
+      const result = parseVocabularyUpload(JSON.stringify(rows));
+      expect(result).toEqual({
+        ok: true,
+        items: expect.any(Array),
+        skippedCount: 0,
+        truncated: true,
+      });
+      if (result.ok) {
+        expect(result.items.length).toBe(VOCABULARY_UPLOAD_MAX_ITEMS);
+      }
+    });
+
+    it('treats an all-invalid file as zero items (caller reports empty)', () => {
+      const result = parseVocabularyUpload('[{"enword":"a","cnword":"坏"}]');
+      expect(result.ok && result.items.length === 0 && result.skippedCount === 1).toBe(true);
     });
   });
 });
diff --git a/src/app/interfaces/vocabulary.ts b/src/app/interfaces/vocabulary.ts
index e568c1c..473dc5e 100644
--- a/src/app/interfaces/vocabulary.ts
+++ b/src/app/interfaces/vocabulary.ts
@@ -1,7 +1,16 @@
-import { fisherYatesShuffle } from "../shared/utils/shuffle";
+import {
+  FisherYatesShuffle,
+  FilterJoinType,
+  FilterOperation,
+  FilterUtility,
+  type IFilterDefinition,
+} from 'actslib';
 
-import type { SelectionModeEnum, RatingOperatorEnum } from "./ui-common";
-import { matchRating } from "./ui-common";
+import { hasActiveFilterDefinition } from "../shared/filter-dialog/filter-dialog-model";
+import type { FilterCustomOperator, FilterableProperty } from "../shared/filter-dialog/filter-dialog-model";
+
+import type { LearnEnglishWordFileItem } from "./learnenglish";
+import type { SelectionModeEnum } from "./ui-common";
 
 // Letter in word
 export interface VocabularySpellingLetter {
@@ -44,7 +53,7 @@ export interface VocabularySpellingOption extends VocabularyOptionCore {
 // Dictation vocabulary options. Dictation plays each word's audio in turn on a
 // fixed interval; there is no typing and no hide-audio/hide-description toggle,
 // so only the item count is configurable.
-export interface VocabularyDictationOption extends VocabularyOptionCore {}
+export type VocabularyDictationOption = VocabularyOptionCore;
 
 export interface VocabularyReviewOption extends VocabularyOptionCore {
   disableVoice: boolean;
@@ -107,7 +116,7 @@ export const buildVocabularyQuizQuestions = (
     const correctText = direction === 'en2cn' ? item.cnword : item.enword;
 
     const distractorTexts = new Set<string>();
-    for (const candidate of fisherYatesShuffle(pool)) {
+    for (const candidate of FisherYatesShuffle(pool)) {
       const text = direction === 'en2cn' ? candidate.cnword : candidate.enword;
       if (text !== correctText) {
         distractorTexts.add(text);
@@ -122,7 +131,7 @@ export const buildVocabularyQuizQuestions = (
       continue;
     }
 
-    const options = fisherYatesShuffle([correctText, ...distractorTexts]);
+    const options = FisherYatesShuffle([correctText, ...distractorTexts]);
     questions.push({
       enword: item.enword,
       cnword: item.cnword,
@@ -168,107 +177,110 @@ export interface ReviewQueueItem {
   itemId?: number;
 };
 
-/**
- * Word-text match operators offered by the vocabulary list filter bar. The
- * phrase operators are textless: they match on the word's shape (a phrase is
- * an enword containing a space) and stay active with blank text.
- */
-export type WordMatchOperator = 'startsWith' | 'contains' | 'equal' | 'endsWith' | 'isPhrase' | 'notPhrase';
+// ── Filter-bar schema (shared filter dialog) ─────────────────────────────────
+//
+// The vocabulary filter is edited by SharedFilterDialogComponent; its seed and
+// result are actslib `IFilterDefinition`, so this page keeps no tree model of
+// its own (see docs/reusable-filter-dialog-design.md).
+
+/** The `isPhrase` custom operator: a phrase is English text containing a
+ *  space. Valueless (the editor shows no input) and recognized from its own
+ *  `Contains ' '` emission when re-seeding. */
+export const VOCABULARY_IS_PHRASE: FilterCustomOperator = {
+  id: 'isPhrase',
+  labelKey: 'vocabularyExercises.wordOpIsPhrase',
+  emit: property => ({ property, operation: FilterOperation.Contains, lowValue: ' ' }),
+  recognize: c => c.operation === FilterOperation.Contains && c.lowValue === ' ',
+};
 
-/** One ANDed word-match condition in the vocabulary list filter. */
-export interface WordCondition {
-  operator: WordMatchOperator;
-  text: string;
-}
+/** actslib string comparisons are case-sensitive while the page matches
+ *  case-insensitively — the dialog folds emitted text values (this hook) and
+ *  `matchVocabularyListFilter` folds the row fields the same way. */
+const foldVocabularyText = (value: string | number): string => String(value).trim().toLowerCase();
 
-/** True for the textless phrase operators (Is Phrase / Not Phrase). */
-export const isPhraseOperator = (op: WordMatchOperator): boolean =>
-  op === 'isPhrase' || op === 'notPhrase';
+const WORD_MATCH_OPERATIONS: FilterOperation[] = [
+  FilterOperation.BeginsWith,
+  FilterOperation.Contains,
+  FilterOperation.Equal,
+  FilterOperation.EndsWith,
+];
 
 /**
- * True when a word condition participates in filtering: phrase operators are
- * always active, the text operators need non-blank text.
+ * Vocabulary's filterable properties: the two text columns plus the per-user
+ * rating. The phrase operator is offered only for the English word, and a
+ * "notPhrase" variant was dropped (actslib `FilterUtility` has no negation).
+ * `rating` is not a row field — the predicate passes it in the synthesized
+ * target (see `matchVocabularyListFilter`); unrated words carry 0 and compare
+ * numerically.
  */
-export const isWordConditionActive = (c: WordCondition): boolean =>
-  isPhraseOperator(c.operator) || c.text.trim().length > 0;
-
-/** One ANDed rating condition in the vocabulary list filter. */
-export interface RatingCondition {
-  operator: RatingOperatorEnum;
-  value: number;
-}
-
-/** Maximum characters before the word-filter summary is ellipsized. */
-const WORD_SUMMARY_MAX = 40;
-
-/**
- * Human-readable summary of the active word conditions for the Word menu's
- * dynamic label, e.g. "starts with a; ends with ing…". Blank-text rows are
- * inactive and skipped. `operatorLabel` supplies the localized operator name.
- */
-export const summarizeWordFilter = (
-  conditions: WordCondition[],
-  operatorLabel: (op: WordMatchOperator) => string
-): string => {
-  const parts: string[] = [];
-  for (const c of conditions) {
-    if (isPhraseOperator(c.operator)) {
-      // Textless condition: the operator label alone is the summary.
-      parts.push(operatorLabel(c.operator));
-      continue;
-    }
-    const text = c.text.trim();
-    if (text.length === 0) {
-      continue;
-    }
-    parts.push(`${operatorLabel(c.operator)} ${text}`);
-  }
-  const joined = parts.join('; ');
-  if (joined.length <= WORD_SUMMARY_MAX) {
-    return joined;
-  }
-  return `${joined.slice(0, WORD_SUMMARY_MAX - 1).trimEnd()}…`;
-};
-
-/**
- * Human-readable summary of the rating conditions for the Rating menu's
- * dynamic label, e.g. ">=3; =5". `operatorSymbol` supplies the operator
- * symbol (the component maps the 5 value-based operators to >= > = <= <).
- */
-export const summarizeRatingFilter = (
-  conditions: RatingCondition[],
-  operatorSymbol: (op: RatingOperatorEnum) => string
-): string =>
-  conditions.map(c => `${operatorSymbol(c.operator)}${c.value}`).join('; ');
+export const VOCABULARY_FILTER_PROPERTIES: FilterableProperty[] = [
+  {
+    key: 'enword',
+    labelKey: 'vocabularyExercises.word',
+    kind: 'string',
+    operations: WORD_MATCH_OPERATIONS,
+    customOperators: [VOCABULARY_IS_PHRASE],
+    prepareValue: foldVocabularyText,
+  },
+  {
+    key: 'cnword',
+    labelKey: 'chinese',
+    kind: 'string',
+    operations: WORD_MATCH_OPERATIONS,
+    prepareValue: foldVocabularyText,
+  },
+  {
+    key: 'rating',
+    labelKey: 'rating',
+    kind: 'number',
+    operations: [
+      FilterOperation.GreaterOrEqual,
+      FilterOperation.GreaterThan,
+      FilterOperation.Equal,
+      FilterOperation.LessOrEqual,
+      FilterOperation.LessThan,
+      FilterOperation.Between,
+    ],
+    numberRange: { min: 0, max: 5 },
+  },
+];
+
+/** A fresh (empty) filter definition: matches everything, shown as "new filter". */
+export const emptyVocabularyFilterDefinition = (): IFilterDefinition => ({
+  join: FilterJoinType.AND,
+  conditions: [],
+});
 
 /**
  * Combined criteria of the vocabulary list filter bar. `freeText` applies live
- * (cross-field substring over id/enword/cnword); `wordConditions` and
- * `ratingConditions` are lists defined via the Word/Rating filter dialogs and
- * are ANDed together (and with freeText). A text word condition whose text is
- * blank is inactive (skipped); the phrase operators (`isPhrase`/`notPhrase`)
- * are textless and always active. (See
- * docs/superpowers/specs/2026-08-16-vocabulary-filter-menus-design.md.)
+ * (cross-field substring over id/enword/cnword); `root` is the actslib
+ * condition definition produced by the shared filter dialog. The definition
+ * and freeText are ANDed. Condition values arrive case-folded (the dialog's
+ * `prepareValue` hooks on `VOCABULARY_FILTER_PROPERTIES`).
  */
 export interface VocabularyListFilter {
   /** Cross-field substring search over id/enword/cnword (legacy behaviour). */
   freeText: string;
-  /** ANDed; blank-text rows are inactive. */
-  wordConditions: WordCondition[];
-  /** ANDed. */
-  ratingConditions: RatingCondition[];
+  /** actslib filter definition (word/rating leaves and nested AND/OR groups). */
+  root: IFilterDefinition;
 }
 
+/**
+ * True when the filter carries nothing: blank freeText and no condition
+ * anywhere in the definition (an empty root, or only empty sub-groups).
+ */
 export const isVocabularyListFilterEmpty = (filter: VocabularyListFilter): boolean =>
-  filter.freeText.trim().length === 0 &&
-  !filter.wordConditions.some(isWordConditionActive) &&
-  filter.ratingConditions.length === 0;
+  filter.freeText.trim().length === 0 && !hasActiveFilterDefinition(filter.root);
 
 /**
- * Single matching rule for the vocabulary list filter bar. freeText AND every
- * active word condition AND every rating condition. All filtering decisions
- * flow through here: the table predicate calls it and nothing else grows
- * private matching logic.
+ * Single matching rule for the vocabulary list filter bar: freeText AND the
+ * actslib definition. The definition is produced by the shared filter dialog
+ * (its string values already trimmed + lowercased via `prepareValue`) and is
+ * evaluated here by `FilterUtility.MatchFilter` against a case-folded target
+ * carrying the row's rating; the free-text check concatenates id/enword/cnword
+ * and has no per-property condition equivalent, so it stays hand-written. All
+ * filtering decisions flow through here: the table predicate calls it and
+ * nothing else grows private matching logic.
  */
 export const matchVocabularyListFilter = (
   item: { id?: number; enword: string; cnword: string },
@@ -285,49 +297,78 @@ export const matchVocabularyListFilter = (
     }
   }
 
-  const enword = item.enword.toLowerCase();
-  for (const c of filter.wordConditions) {
-    if (isPhraseOperator(c.operator)) {
-      // A phrase is an enword containing a space.
-      const isPhrase = item.enword.indexOf(' ') !== -1;
-      if (c.operator === 'isPhrase' ? !isPhrase : isPhrase) {
-        return false;
-      }
-      continue;
-    }
-    const text = c.text.trim().toLowerCase();
-    if (text.length === 0) {
-      continue;
-    }
-    switch (c.operator) {
-      case 'startsWith':
-        if (!enword.startsWith(text)) {
-          return false;
-        }
-        break;
-      case 'contains':
-        if (!enword.includes(text)) {
-          return false;
-        }
-        break;
-      case 'equal':
-        if (enword !== text) {
-          return false;
-        }
-        break;
-      case 'endsWith':
-        if (!enword.endsWith(text)) {
-          return false;
-        }
-        break;
-    }
+  // FilterUtility compares strings case-sensitively, so the condition values
+  // are folded by the dialog's prepareValue hooks and the row's text fields
+  // fold here. The rating rides along as a numeric property: it lives in the
+  // page's rating map, not on the row; unrated words pass 0 and compare
+  // numerically, like unrated rows on every other list page.
+  const target = {
+    enword: item.enword.toLowerCase(),
+    cnword: item.cnword.toLowerCase(),
+    rating,
+  };
+  return FilterUtility.MatchFilter(target, filter.root);
+};
+
+export const VOCABULARY_UPLOAD_MAX_ITEMS = 10000;
+export const VOCABULARY_UPLOAD_MAX_WORD_LENGTH = 500;
+
+/** Hard failures that reject the whole upload. */
+export type VocabularyUploadFailureReason = 'utf16' | 'parse' | 'not-array';
+
+export type VocabularyUploadParseResult =
+  | { ok: false; reason: VocabularyUploadFailureReason }
+  | {
+      ok: true;
+      items: LearnEnglishWordFileItem[];
+      /** Rows dropped because enword/cnword were missing or out of contract. */
+      skippedCount: number;
+      /** True when the import stopped early at VOCABULARY_UPLOAD_MAX_ITEMS rows. */
+      truncated: boolean;
+    };
+
+/**
+ * Parses a user-uploaded vocabulary JSON file (the Add Temp. File flow). The
+ * same row contract as LearningContentService's word files applies; invalid
+ * rows are skipped (and counted) instead of rejecting the whole file, and
+ * hitting the item cap is reported rather than silently truncating.
+ */
+export const parseVocabularyUpload = (fileContent: string): VocabularyUploadParseResult => {
+  // readAsText decodes UTF-16 files as mojibake; stray NUL bytes are the tell.
+  if (fileContent.includes('\u0000')) {
+    return { ok: false, reason: 'utf16' };
+  }
+  let parsed: unknown;
+  try {
+    // Excel/Notepad/PowerShell exports often carry a UTF-8 BOM that JSON.parse rejects.
+    parsed = JSON.parse(fileContent.replace(/^\uFEFF/, ''));
+  } catch {
+    return { ok: false, reason: 'parse' };
+  }
+  if (!Array.isArray(parsed)) {
+    return { ok: false, reason: 'not-array' };
   }
 
-  for (const c of filter.ratingConditions) {
-    if (!matchRating(rating, c.operator, c.value)) {
-      return false;
+  const items: LearnEnglishWordFileItem[] = [];
+  let skippedCount = 0;
+  for (const raw of parsed) {
+    const obj = typeof raw === 'object' && raw !== null ? (raw as Record<string, unknown>) : undefined;
+    const enword = typeof obj?.['enword'] === 'string' ? obj['enword'] : undefined;
+    const cnword = typeof obj?.['cnword'] === 'string' ? obj['cnword'] : undefined;
+    if (
+      enword === undefined ||
+      cnword === undefined ||
+      enword.length <= 1 ||
+      enword.length > VOCABULARY_UPLOAD_MAX_WORD_LENGTH ||
+      cnword.length > VOCABULARY_UPLOAD_MAX_WORD_LENGTH
+    ) {
+      skippedCount++;
+      continue;
+    }
+    items.push({ enword, cnword });
+    if (items.length >= VOCABULARY_UPLOAD_MAX_ITEMS) {
+      return { ok: true, items, skippedCount, truncated: true };
     }
   }
-
-  return true;
+  return { ok: true, items, skippedCount, truncated: false };
 };
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-list.component.html b/src/app/pages/chinese-exercises/chinese-exercises-list.component.html
new file mode 100644
index 0000000..05638ae
--- /dev/null
+++ b/src/app/pages/chinese-exercises/chinese-exercises-list.component.html
@@ -0,0 +1,161 @@
+<ng-container *transloco="let t">
+  <mat-toolbar class="container">
+    <mat-toolbar-row>
+      <span>
+        <h5>{{ t('chinese') }}</h5>
+      </span>
+      <span class="toolbar-spacer"></span>
+      <mat-form-field class="page-toolbar-item">
+        <mat-label>{{ t('files') }}</mat-label>
+        <mat-select matNativeControl [(value)]="selectedFile" (selectionChange)="fileSelectionChanged.emit($event)"
+          [disabled]="isLoadingContents()" [placeholder]="isLoadingContents() ? t('loading') : t('files')">
+          @if (isLoadingContents()) {
+            <mat-option disabled>
+              <mat-spinner diameter="18"></mat-spinner>
+              {{ t('loading') }}
+            </mat-option>
+          }
+          <mat-option value="">{{ t('none') }}</mat-option>
+          @for (file of allFiles(); track file.id ) {
+            <mat-option [value]="file">{{file.nameChinese}}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </mat-toolbar-row>
+  </mat-toolbar>
+
+  <div class="container">
+    <div class="filter-row">
+      <div class="filter-bar">
+        <mat-form-field class="filter-bar-free-text" subscriptSizing="dynamic">
+          <mat-label>{{ t('filter') }}</mat-label>
+          <input matInput [(ngModel)]="freeText" (keyup)="onFreeTextChanged()" [disabled]="!selectedFile()" />
+        </mat-form-field>
+
+        <button mat-stroked-button [matMenuTriggerFor]="filterMenu" [disabled]="!selectedFile()">{{ t('filter') }} ▾</button>
+        <mat-menu #filterMenu="matMenu">
+          <button mat-menu-item (click)="defineFilter.emit()">{{ filterMenuLabel }}</button>
+          <button mat-menu-item (click)="clearFilter.emit()" [disabled]="!hasFilter">{{ t('common.filterClear') }}</button>
+        </mat-menu>
+      </div>
+
+      <div class="filter-bar-actions">
+        <button mat-stroked-button [matMenuTriggerFor]="quickMenu" [disabled]="!selectedFile()">{{ t('common.quickSelection') }} ▾</button>
+        <mat-menu #quickMenu="matMenu">
+          <button mat-menu-item (click)="quickSelect.emit('random')">
+            <mat-icon>shuffle</mat-icon>
+            <span>{{ t('common.randomSelect') }}</span>
+          </button>
+          <button mat-menu-item (click)="quickSelect.emit('sequence')">
+            <mat-icon>format_list_numbered</mat-icon>
+            <span>{{ t('common.sequenceSelect') }}</span>
+          </button>
+          <mat-divider></mat-divider>
+          <button mat-menu-item (click)="selectAllVisible.emit()" [disabled]="visibleRowCount === 0">
+            <mat-icon>select_all</mat-icon>
+            <span>{{ t('common.selectAllVisible') }}</span>
+          </button>
+          <button mat-menu-item (click)="clearSelection.emit()" [disabled]="selection().isEmpty()">
+            <mat-icon>deselect</mat-icon>
+            <span>{{ t('common.clearSelection') }}</span>
+          </button>
+        </mat-menu>
+
+        <button mat-stroked-button [matMenuTriggerFor]="exerciseMenu" [disabled]="!selectedFile()">{{ t('common.exercises') }} ▾</button>
+        <mat-menu #exerciseMenu="matMenu">
+          <button mat-menu-item (click)="recite.emit()">
+            <mat-icon>menu_book</mat-icon>
+            <span>{{ t('chineseExercises.recite') }}</span>
+          </button>
+          <button mat-menu-item (click)="print.emit()">
+            <mat-icon>print</mat-icon>
+            <span>{{ t('print') }}</span>
+          </button>
+        </mat-menu>
+        <mat-divider [vertical]="true"></mat-divider>
+
+        <!-- Counts: total items in the file | rows after filtering | selected rows -->
+        <div class="filter-bar-counts">
+          <span [matTooltip]="t('items')">{{ contentQueueCount }}</span>
+          <mat-divider [vertical]="true"></mat-divider>
+          <span [matTooltip]="t('common.filteredItems')">{{ visibleRowCount }}</span>
+          <mat-divider [vertical]="true"></mat-divider>
+          <span [matTooltip]="t('totalSelections')">{{ selectionCount() }}</span>
+        </div>
+      </div>
+    </div>
+
+    <table mat-table [dataSource]="dataSource()" matSort class="mat-elevation-z8 w-full">
+      <!-- Checkbox Column -->
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox (change)="$event ? allRowsToggled.emit() : null"
+                        [checked]="selection().hasValue() && isAllSelected()"
+                        [indeterminate]="selection().hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-checkbox (click)="$event.stopPropagation()"
+                        (change)="$event ? selection().toggle(row) : null"
+                        [checked]="selection().isSelected(row)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <!-- ID Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by ID"> {{ t('id') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+      </ng-container>
+
+      <!-- Subject Column -->
+      <ng-container matColumnDef="subject">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by subject"> {{ t('subject') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.subject}} </td>
+      </ng-container>
+
+      <!-- Author Column -->
+      <ng-container matColumnDef="author">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by author"> {{ t('common.author') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.author}} </td>
+      </ng-container>
+
+      <!-- Content Column -->
+      <ng-container matColumnDef="content">
+        <th mat-header-cell *matHeaderCellDef> {{ t('content') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-form-field class="control-full-width">
+            <textarea matNativeControl readonly [ngModel]="getDisplayContentText(element)"></textarea>
+          </mat-form-field>
+        </td>
+      </ng-container>
+
+      <!-- Source column -->
+      <ng-container matColumnDef="source">
+        <th mat-header-cell *matHeaderCellDef> {{ t('source') }} </th>
+        <td mat-cell *matCellDef="let element">{{element.source ?? ''}}</td>
+      </ng-container>
+
+      <!-- Rating Column -->
+      <ng-container matColumnDef="rating">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by rating"> {{ t('rating') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-button-toggle-group [ngModel]="getRating(element.id)" aria-label="Rating"
+            (change)="contentRatingChanged.emit({ item: element, event: $event })">
+            <mat-button-toggle [value]="1">1</mat-button-toggle>
+            <mat-button-toggle [value]="2">2</mat-button-toggle>
+            <mat-button-toggle [value]="3">3</mat-button-toggle>
+            <mat-button-toggle [value]="4">4</mat-button-toggle>
+            <mat-button-toggle [value]="5">5</mat-button-toggle>
+          </mat-button-toggle-group>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator [pageSizeOptions]="[20, 50, 100]" showFirstLastButtons
+      aria-label="Select page of periodic elements">
+    </mat-paginator>
+  </div>
+</ng-container>
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-list.component.scss b/src/app/pages/chinese-exercises/chinese-exercises-list.component.scss
new file mode 100644
index 0000000..a32df96
--- /dev/null
+++ b/src/app/pages/chinese-exercises/chinese-exercises-list.component.scss
@@ -0,0 +1,82 @@
+// The host element stands in for the toolbar/table blocks that used to be
+// direct children of the page's flex container; display: contents keeps the
+// original layout semantics (its children become the flex items).
+:host {
+    display: contents;
+}
+
+.toolbar-spacer {
+    flex: 1 1 auto;
+}
+
+.page-toolbar-item {
+    margin-top: 4px;
+    padding-top: 4px;
+}
+
+// Row above the table: the bordered filter box (free text + Content/Rating
+// filters) on the left, the action menus and counts on the right.
+.filter-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    margin-bottom: 8px;
+}
+
+// Fiori-style bordered box around the actual filters only. The free-text
+// filter grows to fill the box; on narrow screens the box takes a full row
+// and the free text wraps inside it.
+.filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    padding: 8px 12px;
+    border: 1px solid var(--mat-sys-outline-variant, #e0e0e0);
+    border-radius: 4px;
+}
+
+.filter-bar-free-text {
+    flex: 1 1 auto;
+    min-width: 200px;
+}
+
+// Action menus (Selection, Exercises) and counts, outside the bordered
+// box, pushed to the right edge of the row.
+.filter-bar-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    margin-left: auto;
+
+    mat-divider {
+        height: 24px;
+    }
+}
+
+// Read-only counts at the end of the row: total | filtered | selected.
+.filter-bar-counts {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--mat-sys-on-surface-variant, #666);
+    white-space: nowrap;
+
+    mat-divider {
+        height: 18px;
+    }
+}
+
+@media (max-width: 820px) {
+    .filter-bar {
+        flex: 1 1 100%;
+    }
+
+    .filter-bar-free-text {
+        flex: 1 1 100%;
+    }
+}
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-list.component.spec.ts b/src/app/pages/chinese-exercises/chinese-exercises-list.component.spec.ts
new file mode 100644
index 0000000..2de30c8
--- /dev/null
+++ b/src/app/pages/chinese-exercises/chinese-exercises-list.component.spec.ts
@@ -0,0 +1,217 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import type { ComponentFixture } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { MatTableDataSource } from '@angular/material/table';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
+} from '@jsverse/transloco';
+import { FilterJoinType, FilterOperation, type IFilterDefinition } from 'actslib';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import type { LearnChineseFileItem, LearningContent } from '../../interfaces';
+
+import { ChineseExercisesListComponent } from './chinese-exercises-list.component';
+
+const emptyRoot: IFilterDefinition = { join: FilterJoinType.AND, conditions: [] };
+
+const mockFiles: LearningContent[] = [
+  { id: 1, categoryId: 4, nameEnglish: 'File1', nameChinese: '文件一', fileUrl: 'data/file1.json' },
+];
+
+const mockItems: LearnChineseFileItem[] = [
+  { id: 1, subject: '静夜思', author: '李白', content: '床前明月光' },
+  { id: 2, subject: '春晓', author: '孟浩然', content: '春眠不觉晓' },
+];
+
+describe('ChineseExercisesListComponent', () => {
+  let component: ChineseExercisesListComponent;
+  let fixture: ComponentFixture<ChineseExercisesListComponent>;
+  let dataSource: MatTableDataSource<LearnChineseFileItem>;
+  let selection: SelectionModel<LearnChineseFileItem>;
+
+  beforeEach(async () => {
+    dataSource = new MatTableDataSource<LearnChineseFileItem>();
+    dataSource.data = mockItems.slice();
+    selection = new SelectionModel<LearnChineseFileItem>(true, []);
+
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key.split('.').pop() ?? key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [ChineseExercisesListComponent, NoopAnimationsModule],
+      providers: [
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(ChineseExercisesListComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('allFiles', mockFiles);
+    fixture.componentRef.setInput('selectedFile', mockFiles[0]);
+    fixture.componentRef.setInput('isLoadingContents', false);
+    fixture.componentRef.setInput('dataSource', dataSource);
+    fixture.componentRef.setInput('selection', selection);
+    fixture.componentRef.setInput('contentRatings', new Map<number, number>());
+    fixture.componentRef.setInput('filterDefinition', emptyRoot);
+    fixture.componentRef.setInput('appliedFreeText', '');
+  });
+
+  it('should create and render the table', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should expose the full column set', () => {
+    expect(component.displayedColumns).toEqual([
+      'select',
+      'id',
+      'subject',
+      'author',
+      'content',
+      'source',
+      'rating',
+    ]);
+  });
+
+  it('should count visible rows from the filter', () => {
+    expect(component.visibleRowCount).toBe(2);
+
+    dataSource.filter = '春晓';
+    expect(component.visibleRowCount).toBe(1);
+  });
+
+  it('isAllSelected should compare against visible rows only', () => {
+    // The filter hides mockItems[0]; only the visible row's state counts.
+    selection.select(mockItems[0]);
+    selection.select(mockItems[1]);
+    dataSource.filter = '春晓';
+    fixture.detectChanges();
+
+    expect(component.isAllSelected()).toBe(true);
+  });
+
+  it('isAllSelected should be false when a visible row is missing from the selection', () => {
+    selection.select(mockItems[0]);
+
+    expect(component.isAllSelected()).toBe(false);
+  });
+
+  it('should seed the selection count on init and track changes', () => {
+    selection.select(mockItems[0]);
+    fixture.detectChanges();
+    expect(component.selectionCount()).toBe(1);
+
+    selection.select(mockItems[1]);
+    expect(component.selectionCount()).toBe(2);
+  });
+
+  it('should seed the free text box from the applied filter', () => {
+    fixture.componentRef.setInput('appliedFreeText', '春晓');
+
+    fixture.detectChanges();
+
+    expect(component.freeText).toBe('春晓');
+  });
+
+  it('should emit free text changes live', () => {
+    fixture.detectChanges();
+    const emitted: string[] = [];
+    component.freeTextChanged.subscribe(v => emitted.push(v));
+
+    component.freeText = '春晓';
+    component.onFreeTextChanged();
+
+    expect(emitted).toEqual(['春晓']);
+  });
+
+  it('should show a New label when no filter is active', () => {
+    expect(component.hasFilter).toBe(false);
+    expect(component.filterMenuLabel).toBe('filterNew');
+  });
+
+  it('should summarize active text conditions with word labels', () => {
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [{ property: 'subject', operation: FilterOperation.Contains, lowValue: '静夜' }],
+    });
+
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toContain('subject');
+    expect(component.filterMenuLabel).toContain('opContains');
+    expect(component.filterMenuLabel).toContain('静夜');
+  });
+
+  it('should summarize rating conditions with comparison symbols', () => {
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [{ property: 'rating', operation: FilterOperation.GreaterOrEqual, lowValue: 3 }],
+    });
+
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toContain('>=');
+    expect(component.filterMenuLabel).toContain('3');
+  });
+
+  it('should render nested groups parenthesized with join words', () => {
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [
+        {
+          join: FilterJoinType.OR,
+          conditions: [
+            { property: 'rating', operation: FilterOperation.GreaterOrEqual, lowValue: 4 },
+            { property: 'rating', operation: FilterOperation.Equal, lowValue: 0 },
+          ],
+        },
+      ],
+    });
+
+    const label = component.filterMenuLabel;
+    expect(label).toContain('joinOr');
+    expect(label).toContain('(');
+    expect(label).toContain('>=');
+  });
+
+  it('should strip @ markers from v2 display content', () => {
+    const v2Item: LearnChineseFileItem = {
+      id: 3,
+      subject: ' poem',
+      content: 'full text',
+      contentlength: 2,
+      content1: 'first @line',
+      content2: 'second @line',
+    };
+
+    // Version 2 file: '@' cloze markers are hidden.
+    fixture.componentRef.setInput('selectedFile', { ...mockFiles[0], version: 2 });
+    expect(component.getDisplayContentText(v2Item)).toBe('first line\nsecond line');
+
+    // Version 1 file: markers are kept.
+    fixture.componentRef.setInput('selectedFile', mockFiles[0]);
+    expect(component.getDisplayContentText(v2Item)).toBe('first @line\nsecond @line');
+  });
+
+  it('should resolve ratings by numeric item id', () => {
+    fixture.componentRef.setInput('contentRatings', new Map([[2, 4]]));
+
+    expect(component.getRating(2)).toBe(4);
+    expect(component.getRating(undefined)).toBe(0);
+  });
+});
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-list.component.ts b/src/app/pages/chinese-exercises/chinese-exercises-list.component.ts
new file mode 100644
index 0000000..e26cfb2
--- /dev/null
+++ b/src/app/pages/chinese-exercises/chinese-exercises-list.component.ts
@@ -0,0 +1,234 @@
+import type { SelectionModel } from '@angular/cdk/collections';
+import type { OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ViewChild,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import type { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import type { MatSelectChange } from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import type { MatTableDataSource } from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import type { IFilterDefinition } from 'actslib';
+
+import type { LearnChineseFileItem, LearningContent } from '../../interfaces';
+import { CHINESE_FILTER_PROPERTIES, getChineseReciteItemDisplayContent } from '../../interfaces';
+import { hasActiveFilterDefinition, summarizeFilterDefinition } from '../../shared/filter-dialog';
+
+/** Menu-label cap before the ellipsis, matching the vocabulary list. */
+const FILTER_MENU_MAX_LENGTH = 40;
+
+/**
+ * List screen of the Chinese exercises page: toolbar (file selector), the
+ * Fiori-style filter bar (live free text + Go-applied Content/Rating
+ * conditions), quick-selection/exercise menus and the recitation table with
+ * paginator/sort. Purely presentational — the container owns the dataSource,
+ * selection model and all dialog orchestration; this component only renders
+ * them and forwards user interactions as outputs. The paginator/sort wiring
+ * onto the shared MatTableDataSource happens here because the corresponding
+ * elements live in this template.
+ */
+@Component({
+  selector: 'app-chinese-exercises-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatToolbarModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatSortModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatButtonToggleModule,
+    MatTooltipModule,
+    MatMenuModule,
+    MatDividerModule,
+    TranslocoModule,
+  ],
+  templateUrl: './chinese-exercises-list.component.html',
+  styleUrl: './chinese-exercises-list.component.scss',
+})
+export class ChineseExercisesListComponent implements OnInit {
+  readonly allFiles = input.required<LearningContent[]>();
+  readonly selectedFile = model<LearningContent | undefined>(undefined);
+  readonly isLoadingContents = input.required<boolean>();
+  readonly dataSource = input.required<MatTableDataSource<LearnChineseFileItem>>();
+  readonly selection = input.required<SelectionModel<LearnChineseFileItem>>();
+  readonly contentRatings = input.required<Map<number, number>>();
+
+  // ── Filter bar ──────────────────────────────────────────────────
+  // The container owns the applied condition definition (it opens the shared
+  // filter dialog); this child only renders it for the menu label and
+  // forwards intents. freeText is a local field for the input box, emitted
+  // live.
+  readonly filterDefinition = input.required<IFilterDefinition>();
+  /**
+   * Free text currently applied by the container. The container's filter
+   * survives the destroy/recreate of this screen, so it seeds the input box
+   * on init — otherwise the box shows empty while the table stays invisibly
+   * filtered.
+   */
+  readonly appliedFreeText = input('');
+  readonly freeTextChanged = output<string>();
+  readonly defineFilter = output<void>();
+  readonly clearFilter = output<void>();
+  readonly quickSelect = output<'random' | 'sequence'>();
+  readonly selectAllVisible = output<void>();
+  readonly clearSelection = output<void>();
+
+  readonly allRowsToggled = output<void>();
+  readonly fileSelectionChanged = output<MatSelectChange>();
+  readonly contentRatingChanged = output<{
+    item: LearnChineseFileItem;
+    event: MatButtonToggleChange;
+  }>();
+  readonly recite = output<void>();
+  readonly print = output<void>();
+
+  /** Stable identities so mat-table's column defs only re-diff on a real flip. */
+  readonly displayedColumns = [
+    'select',
+    'id',
+    'subject',
+    'author',
+    'content',
+    'source',
+    'rating',
+  ];
+
+  freeText = '';
+
+  private readonly transloco = inject(TranslocoService);
+
+  /** Free text applies live. */
+  onFreeTextChanged(): void {
+    this.freeTextChanged.emit(this.freeText);
+  }
+
+  get hasFilter(): boolean {
+    return hasActiveFilterDefinition(this.filterDefinition());
+  }
+
+  /** Condition-definition summary (join words and parentheses included) for the Filter menu item. */
+  get filterMenuLabel(): string {
+    if (!this.hasFilter) {
+      return this.transloco.translate('common.filterNew');
+    }
+    return summarizeFilterDefinition(
+      this.filterDefinition(),
+      CHINESE_FILTER_PROPERTIES,
+      { translate: key => this.transloco.translate(key) },
+      FILTER_MENU_MAX_LENGTH
+    );
+  }
+
+  private readonly destroyRef = inject(DestroyRef);
+
+  /**
+   * Live mirror of the selection size. The selection model is a shared mutable
+   * object owned by the container: selection changes triggered from
+   * container-side dialog flows (Random, Sequence, Select All Visible, Clear)
+   * do not change any input reference, so the count is mirrored into a signal
+   * that the template reads instead of poking change detection by hand.
+   */
+  readonly selectionCount = signal(0);
+
+  @ViewChild(MatPaginator, { static: false }) set content(paginator: MatPaginator) {
+    if (paginator) {
+      // initially setter gets called with undefined
+      this.dataSource().paginator = paginator;
+    }
+  }
+  @ViewChild(MatSort, { static: false }) set contentSort(sort: MatSort) {
+    if (sort) {
+      this.dataSource().sort = sort;
+    }
+  }
+
+  ngOnInit(): void {
+    // Restore the filter box to what the container has applied; a fresh
+    // instance starts empty otherwise.
+    this.freeText = this.appliedFreeText();
+
+    // Seed the count from the live selection: a screen re-created after a
+    // session inherits the shared SelectionModel with rows already checked,
+    // but the selection.changed subscription only fires on the *next* change
+    // — so without this seed the toolbar shows 0 while checkboxes are
+    // visibly checked.
+    this.selectionCount.set(this.selection().selected.length);
+
+    this.selection()
+      .changed.pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.selectionCount.set(this.selection().selected.length));
+  }
+
+  get contentQueueCount(): number {
+    return this.dataSource().data.length;
+  }
+
+  /** Rows the table currently shows: the filtered count when a filter is active. */
+  get visibleRowCount(): number {
+    return this.dataSource().filter
+      ? this.dataSource().filteredData.length
+      : this.dataSource().data.length;
+  }
+
+  /**
+   * Whether every visible row is selected. Comparing against the visible rows
+   * (not just counts) keeps the header checkbox honest when the selection also
+   * contains rows the current filter hides — mirroring the container's
+   * isAllSelected/toggleAllRows semantics.
+   */
+  isAllSelected(): boolean {
+    const source = this.dataSource();
+    const visible = source.filter ? source.filteredData : source.data;
+    return visible.length > 0 && visible.every(row => this.selection().isSelected(row));
+  }
+
+  /**
+   * Multi-segment recitation content (version 2 files) joined as display text;
+   * the '@' cloze markers are hidden in the list view.
+   */
+  getDisplayContentText(cont: LearnChineseFileItem): string {
+    if (this.selectedFile()?.version === 2) {
+      return getChineseReciteItemDisplayContent(cont).replaceAll('@', '');
+    }
+
+    return getChineseReciteItemDisplayContent(cont);
+  }
+
+  getRating(itemId: number | undefined): number {
+    if (itemId === undefined) {
+      return 0;
+    }
+    return this.contentRatings().get(itemId) ?? 0;
+  }
+}
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-options-dialog.component.ts b/src/app/pages/chinese-exercises/chinese-exercises-options-dialog.component.ts
new file mode 100644
index 0000000..21d7437
--- /dev/null
+++ b/src/app/pages/chinese-exercises/chinese-exercises-options-dialog.component.ts
@@ -0,0 +1,77 @@
+import { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import type { ChineseReciteOption } from '../../interfaces';
+import {
+  QuestionBankItemLevelEnum,
+  getAllQuestionBankLevelEnumValues,
+  getQuestionBankLevelName,
+} from '../../interfaces';
+
+/**
+ * Recitation options (level / count / allow-empty-answer) shown from the
+ * Exercises menu. `OK` returns a `ChineseReciteOption`; Cancel / backdrop /
+ * Esc return `undefined`. The count is disabled when the table has an
+ * explicit selection (its size dictates the queue).
+ */
+@Component({
+  selector: 'app-chinese-exercises-options-dlg',
+  templateUrl: 'chinese-exercises-options-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    FormsModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatSelectModule,
+    TranslocoModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChineseExercisesOptionsDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<ChineseExercisesOptionsDialogComponent>);
+  // Declared BEFORE `countOfItems` because field initializers run in
+  // declaration order — `countOfItems`' initializer reads `this.data`.
+  readonly data = inject<{
+    reciteContentCount: number;
+    disableCount: boolean;
+    translationDisabled: boolean;
+  }>(MAT_DIALOG_DATA);
+  readonly selectedLevel = model(QuestionBankItemLevelEnum.Medium);
+  readonly allowEmptyAnswer = model(false);
+  readonly countOfItems = model(this.data.disableCount ? this.data.reciteContentCount : 20);
+  readonly allLevels = getAllQuestionBankLevelEnumValues();
+  getQuestionBankLevelName = getQuestionBankLevelName;
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onYesClick(): void {
+    const selvl = this.selectedLevel();
+
+    const closedata: ChineseReciteOption = {
+      selectedLevel: selvl,
+      countOfItems: this.countOfItems(),
+      allowEmptyAnswer: this.allowEmptyAnswer(),
+    };
+
+    this.dialogRef.close(closedata);
+  }
+}
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-options-dialog.html b/src/app/pages/chinese-exercises/chinese-exercises-options-dialog.html
index 27f8447..ef52b18 100644
--- a/src/app/pages/chinese-exercises/chinese-exercises-options-dialog.html
+++ b/src/app/pages/chinese-exercises/chinese-exercises-options-dialog.html
@@ -1,26 +1,28 @@
-<h2 mat-dialog-title>Options of Chinese Reciting</h2>
-<mat-dialog-content class="control-full-width">
-  <mat-form-field class="page-toolbar-item">
-    <mat-label>Level</mat-label>
-    <mat-select matNativeControl class="control-full-width" [(value)]="selectedLevel">
-      @for (lvl of allLevels; track $index) {
-        <mat-option [value]="lvl">{{getQuestionBankLevelName(lvl)}}</mat-option>
-      }
-    </mat-select>
-  </mat-form-field>
+<div *transloco="let t">
+  <h2 mat-dialog-title>{{ t('chineseExercises.optionsOfReciting') }}</h2>
+  <mat-dialog-content class="control-full-width">
+    <mat-form-field class="control-full-width">
+      <mat-label>{{ t('chineseExercises.level') }}</mat-label>
+      <mat-select [(ngModel)]="selectedLevel" name="reciteLevel">
+        @for (lvl of allLevels; track $index) {
+          <mat-option [value]="lvl">{{getQuestionBankLevelName(lvl)}}</mat-option>
+        }
+      </mat-select>
+    </mat-form-field>
 
-  <mat-form-field class="control-full-width">
-    <mat-label>Count</mat-label>
-    <input matInput type="number" [(ngModel)]="countOfItems" [disabled]="data.disableCount">
-    <span matSuffix>{{data.reciteContentCount}}</span>
-  </mat-form-field>
+    <mat-form-field class="control-full-width">
+      <mat-label>{{ t('count') }}</mat-label>
+      <input matInput type="number" [(ngModel)]="countOfItems" name="reciteCount" [disabled]="data.disableCount">
+      <span matSuffix>{{data.reciteContentCount}}</span>
+    </mat-form-field>
 
-  <div class="control-full-width">
-    <mat-checkbox [(ngModel)]="allowEmptyAnswer"> Allow Empty Answer </mat-checkbox>
-  </div>
+    <div class="control-full-width">
+      <mat-checkbox [(ngModel)]="allowEmptyAnswer" name="reciteAllowEmpty"> {{ t('chineseExercises.allowEmptyAnswer') }} </mat-checkbox>
+    </div>
 
-</mat-dialog-content>
-<mat-dialog-actions>
-  <button mat-button (click)="onNoClick()">No Thanks</button>
-  <button mat-button (click)="onYesClick()" cdkFocusInitial>OK</button>
-</mat-dialog-actions>
\ No newline at end of file
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
+    <button mat-button (click)="onYesClick()" cdkFocusInitial>{{ t('ok') }}</button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-printoptions-dialog.component.ts b/src/app/pages/chinese-exercises/chinese-exercises-printoptions-dialog.component.ts
new file mode 100644
index 0000000..c6b6d29
--- /dev/null
+++ b/src/app/pages/chinese-exercises/chinese-exercises-printoptions-dialog.component.ts
@@ -0,0 +1,103 @@
+import { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatDateFnsModule, provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
+import { TranslocoModule } from '@jsverse/transloco';
+import { zhCN } from 'date-fns/locale';
+
+import type { ChineseRecitePrintOption } from '../../interfaces';
+import {
+  QuestionBankItemLevelEnum,
+  MY_DATE_FORMATS,
+  getAllPrintExecDateString,
+  getAllQuestionBankLevelEnumValues,
+  getQuestionBankLevelName,
+} from '../../interfaces';
+
+/**
+ * Print options (level / count / entry date / answer line break / exec date)
+ * shown from the Exercises menu; the print flow itself navigates to the
+ * knowledge display page. `OK` returns a `ChineseRecitePrintOption`;
+ * Cancel / backdrop / Esc return `undefined`. The count is disabled when the
+ * table has an explicit selection (its size dictates the queue).
+ */
+@Component({
+  selector: 'app-chinese-exercises-printoptions-dlg',
+  templateUrl: 'chinese-exercises-printoptions-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    FormsModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatSelectModule,
+    MatRadioModule,
+    MatDatepickerModule,
+    MatDateFnsModule,
+    TranslocoModule,
+  ],
+  providers: [
+    provideDateFnsAdapter(),
+    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
+    { provide: MAT_DATE_LOCALE, useValue: zhCN },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChineseExercisesPrintOptionsDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<ChineseExercisesPrintOptionsDialogComponent>);
+  // Declared BEFORE `countOfItems` because field initializers run in
+  // declaration order — `countOfItems`' initializer reads `this.data`.
+  readonly data = inject<{
+    reciteContentCount: number;
+    disableCount: boolean;
+    translationDisabled: boolean;
+  }>(MAT_DIALOG_DATA);
+
+  readonly selectedLevel = model(QuestionBankItemLevelEnum.Medium);
+  readonly countOfItems = model(this.data.disableCount ? this.data.reciteContentCount : 20);
+  readonly printEntryDate = model(true);
+  readonly answerLineBreak = model(true);
+  readonly selectedExecDateModel = model<number>(0);
+  readonly execDate = model(new Date());
+
+  readonly allPrintExecDates = getAllPrintExecDateString();
+  readonly allLevels = getAllQuestionBankLevelEnumValues();
+  getQuestionBankLevelName = getQuestionBankLevelName;
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onYesClick(): void {
+    const selvl = this.selectedLevel();
+
+    const closedata: ChineseRecitePrintOption = {
+      selectedLevel: selvl,
+      countOfItems: this.countOfItems(),
+      printEntryDate: this.printEntryDate(),
+      answerLineBreakPerItem: this.answerLineBreak(),
+      respectRetentionCurve: this.selectedExecDateModel() === 1 ? true : false,
+      printExecDate: this.selectedExecDateModel() === 2 ? true : false,
+      execDate: this.selectedExecDateModel() === 2 ? this.execDate() : undefined,
+    };
+
+    this.dialogRef.close(closedata);
+  }
+}
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-printoptions-dialog.html b/src/app/pages/chinese-exercises/chinese-exercises-printoptions-dialog.html
index 8e71c6a..a0f7cf8 100644
--- a/src/app/pages/chinese-exercises/chinese-exercises-printoptions-dialog.html
+++ b/src/app/pages/chinese-exercises/chinese-exercises-printoptions-dialog.html
@@ -25,7 +25,7 @@ <h2 mat-dialog-title>{{ t('chineseExercises.optionsOfReciting') }}</h2>
     </div>
 
     <div class="control-full-width">
-      <mat-label>{{ t('chineseExercises.execDateOption') }}</mat-label>
+      <mat-label>{{ t('common.execDateOption') }}</mat-label>
       <mat-radio-group aria-label="Select an option" class="control-full-width" name="reciteExecDateOption" [(ngModel)]="selectedExecDateModel">
         @for (ped of allPrintExecDates; track $index) {
           <mat-radio-button [value]="ped.value">{{ped.label}}</mat-radio-button>
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-select-dialog.component.spec.ts b/src/app/pages/chinese-exercises/chinese-exercises-select-dialog.component.spec.ts
new file mode 100644
index 0000000..7752c1a
--- /dev/null
+++ b/src/app/pages/chinese-exercises/chinese-exercises-select-dialog.component.spec.ts
@@ -0,0 +1,99 @@
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import type { ComponentFixture} from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+} from '@jsverse/transloco';
+import { of } from 'rxjs';
+
+import { SelectionModeEnum } from '../../interfaces';
+
+import { ChineseExercisesSelectDialogComponent } from './chinese-exercises-select-dialog.component';
+
+function mockTranslocoService() {
+  return {
+    setActiveLang: vi.fn(),
+    getActiveLang: vi.fn(),
+    selectTranslate: vi.fn().mockReturnValue(of('')),
+    _loadDependencies: vi.fn().mockReturnValue(of(null)),
+    translate: vi.fn((key: string) => key),
+    activeLang: 'en',
+    config: { reRenderOnLangChange: true, prodMode: false },
+    langChanges$: of('en'),
+    events$: of(),
+  };
+}
+
+describe('ChineseExercisesSelectDialogComponent', () => {
+  let fixture: ComponentFixture<ChineseExercisesSelectDialogComponent>;
+  let closeSpy: ReturnType<typeof vi.fn>;
+
+  async function createWith(data: { mode: SelectionModeEnum; rowCount?: number }) {
+    closeSpy = vi.fn();
+    await TestBed.configureTestingModule({
+      imports: [ChineseExercisesSelectDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: data },
+        { provide: MatDialogRef, useValue: { close: closeSpy } },
+        { provide: TranslocoService, useValue: mockTranslocoService() },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents();
+    fixture = TestBed.createComponent(ChineseExercisesSelectDialogComponent);
+  }
+
+  it('random (Free Selection) closes returning only a count', async () => {
+    await createWith({ mode: SelectionModeEnum.FreeSelection });
+    fixture.componentInstance.countOfItems.set(7);
+    fixture.componentInstance.onYesClick();
+    expect(closeSpy).toHaveBeenCalledWith({
+      selectedSelectMode: SelectionModeEnum.FreeSelection,
+      countOfItems: 7,
+    });
+  });
+
+  it('sequence (By Count) closes returning count and offset', async () => {
+    await createWith({ mode: SelectionModeEnum.ByCount, rowCount: 20 });
+    fixture.componentInstance.countOfItems.set(5);
+    fixture.componentInstance.countOfOffset.set(3);
+    fixture.componentInstance.onYesClick();
+    expect(closeSpy).toHaveBeenCalledWith({
+      selectedSelectMode: SelectionModeEnum.ByCount,
+      countOfItems: 5,
+      countOfOffset: 3,
+    });
+  });
+
+  it('isFormInvalid rejects a non-positive count', async () => {
+    await createWith({ mode: SelectionModeEnum.FreeSelection });
+    fixture.componentInstance.countOfItems.set(0);
+    expect(fixture.componentInstance.isFormInvalid).toBe(true);
+
+    fixture.componentInstance.countOfItems.set(1);
+    expect(fixture.componentInstance.isFormInvalid).toBe(false);
+  });
+
+  it('isFormInvalid rejects a By Count offset at or beyond rowCount', async () => {
+    await createWith({ mode: SelectionModeEnum.ByCount, rowCount: 10 });
+    fixture.componentInstance.countOfItems.set(2);
+    fixture.componentInstance.countOfOffset.set(10);
+    expect(fixture.componentInstance.isFormInvalid).toBe(true);
+
+    fixture.componentInstance.countOfOffset.set(9);
+    expect(fixture.componentInstance.isFormInvalid).toBe(false);
+  });
+
+  it('onNoClick closes with undefined (selection untouched)', async () => {
+    await createWith({ mode: SelectionModeEnum.FreeSelection });
+    fixture.componentInstance.onNoClick();
+    expect(closeSpy).toHaveBeenCalledWith();
+  });
+});
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-select-dialog.component.ts b/src/app/pages/chinese-exercises/chinese-exercises-select-dialog.component.ts
new file mode 100644
index 0000000..fb77e06
--- /dev/null
+++ b/src/app/pages/chinese-exercises/chinese-exercises-select-dialog.component.ts
@@ -0,0 +1,99 @@
+import { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import type { VocabularySelectOption } from '../../interfaces';
+import { SelectionModeEnum } from '../../interfaces';
+
+/**
+ * Count/offset prompt behind the Selection menu's Random and Sequence items
+ * (there is no by-word selection for Chinese items). `OK` returns a
+ * `VocabularySelectOption`; Cancel / backdrop / Esc return `undefined` so the
+ * caller leaves the selection untouched.
+ */
+@Component({
+  selector: 'app-chinese-exercises-select-dlg',
+  templateUrl: 'chinese-exercises-select-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    FormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    TranslocoModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ChineseExercisesSelectDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<ChineseExercisesSelectDialogComponent>);
+  /** Exposes SelectionModeEnum to the template for @switch on data.mode. */
+  readonly SelectionMode = SelectionModeEnum;
+  readonly data = inject<SelectDialogData>(MAT_DIALOG_DATA);
+
+  readonly countOfItems = model(20);
+  readonly countOfOffset = model(0);
+
+  get titleKey(): string {
+    // Dialog titles match the Selection menu items that open them.
+    switch (this.data.mode) {
+      case SelectionModeEnum.FreeSelection:
+        return 'common.randomSelect';
+      case SelectionModeEnum.ByCount:
+        return 'common.sequenceSelect';
+      default:
+        return 'common.sequenceSelect';
+    }
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  get isFormInvalid(): boolean {
+    if (this.data.mode === SelectionModeEnum.ByCount) {
+      // Require an integer count >= 1 and an integer offset in [0, rowCount)
+      // so an out-of-range offset can't silently wipe the selection.
+      const count = this.countOfItems();
+      const offset = this.countOfOffset() ?? 0;
+      const rowCount = this.data.rowCount;
+      const countInvalid = !Number.isInteger(count) || count < 1;
+      const offsetInvalid =
+        !Number.isInteger(offset) || offset < 0 || (rowCount !== undefined && offset >= rowCount);
+      return countInvalid || offsetInvalid;
+    }
+    return !Number.isInteger(this.countOfItems()) || this.countOfItems() < 1;
+  }
+
+  onYesClick(): void {
+    const result: VocabularySelectOption = { selectedSelectMode: this.data.mode };
+    if (this.data.mode === SelectionModeEnum.ByCount) {
+      // Clamp count/offset to safe integers as defense-in-depth.
+      const rowCount = this.data.rowCount;
+      const offset = Math.max(0, Math.floor(this.countOfOffset() ?? 0));
+      result.countOfItems = Math.max(1, Math.floor(this.countOfItems() ?? 1));
+      result.countOfOffset =
+        rowCount !== undefined ? Math.min(offset, Math.max(0, rowCount - 1)) : offset;
+    } else {
+      result.countOfItems = Math.max(1, Math.floor(this.countOfItems() ?? 1));
+    }
+    this.dialogRef.close(result);
+  }
+}
+
+/** Dialog data: `mode` is always required; `rowCount` bounds By Count's offset. */
+interface SelectDialogData {
+  mode: SelectionModeEnum;
+  rowCount?: number;
+}
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-select-dialog.html b/src/app/pages/chinese-exercises/chinese-exercises-select-dialog.html
new file mode 100644
index 0000000..b43f162
--- /dev/null
+++ b/src/app/pages/chinese-exercises/chinese-exercises-select-dialog.html
@@ -0,0 +1,27 @@
+<div *transloco="let t">
+  <h2 mat-dialog-title>{{ t(titleKey) }}</h2>
+  <mat-dialog-content class="control-full-width">
+    @switch (data.mode) {
+      @case (SelectionMode.ByCount) {
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('countOfSelection') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="countOfItems" min="1" />
+        </mat-form-field>
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('countOfOffset') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="countOfOffset" min="0" />
+        </mat-form-field>
+      }
+      @case (SelectionMode.FreeSelection) {
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('countOfSelection') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="countOfItems" min="1" />
+        </mat-form-field>
+      }
+    }
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
+    <button mat-button (click)="onYesClick()" [disabled]="isFormInvalid">{{ t('ok') }}</button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/pages/chinese-exercises/chinese-exercises-selectbyrating-dialog.html b/src/app/pages/chinese-exercises/chinese-exercises-selectbyrating-dialog.html
deleted file mode 100644
index 6f0a461..0000000
--- a/src/app/pages/chinese-exercises/chinese-exercises-selectbyrating-dialog.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('selectByRating') }}</h2>
-  <mat-dialog-content class="control-full-width">
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('selection.ratingOperator') }}</mat-label>
-      <mat-select [(ngModel)]="ratingOperator">
-        @for (op of ratingOperators; track op.value) {
-          <mat-option [value]="op.value">{{ t('selection.' + op.label) }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('selection.ratingValue') }}</mat-label>
-      <mat-select [(ngModel)]="ratingValue">
-        @for (val of ratingValues; track val) {
-          <mat-option [value]="val">{{ val }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-  </mat-dialog-content>
-  <mat-dialog-actions>
-    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
-    <button mat-button (click)="onYesClick()">{{ t('ok') }}</button>
-  </mat-dialog-actions>
-</div>
diff --git a/src/app/pages/chinese-exercises/chinese-exercises.component.html b/src/app/pages/chinese-exercises/chinese-exercises.component.html
index 4e1c679..6201192 100644
--- a/src/app/pages/chinese-exercises/chinese-exercises.component.html
+++ b/src/app/pages/chinese-exercises/chinese-exercises.component.html
@@ -1,146 +1,27 @@
-<main focusOnNavigation aria-label="Recites page" class="chinese-exercises-page" *transloco="let t">
+<main focusOnNavigation aria-label="Chinese Exercise page" class="chinese-exercises-page">
   <div class="chinese-exercises-page-content">
-    @if (isRecitingNotStarted)
-    {
-      <mat-toolbar class="container">
-        <mat-toolbar-row>
-          <span>
-            <h5>{{ t('chineseExercises.title') }}</h5>
-          </span>
-          <span class="toolbar-spacer"></span>
-          <mat-form-field class="page-toolbar-item">
-            <mat-label>{{ t('files') }}</mat-label>
-            <mat-select matNativeControl [(value)]="selectedFile" (selectionChange)="onFileSelectionChanged($event)"
-              [disabled]="isLoadingContents" [placeholder]="isLoadingContents ? t('loading') : t('files')">
-              @if (isLoadingContents) {
-                <mat-option disabled>
-                  <mat-spinner diameter="18"></mat-spinner>
-                  {{ t('loading') }}
-                </mat-option>
-              }
-              <mat-option value="">{{ t('none') }}</mat-option>
-              @for (file of allFiles; track file.id ) {
-                <mat-option [value]="file">{{file.nameChinese}}</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-          <span class="toolbar-item-count"><small>{{ t('items') }}: {{reciteContentCount}}</small></span>
-          <section style="padding-left: 8px;">
-            <div class="example-button-container">
-              <button mat-fab [matMenuTriggerFor]="selectMenu" [matTooltip]="t('select')" [disabled]="!selectedFile">
-                <mat-icon>query_builder</mat-icon>
-              </button>
-            </div>
-          </section>
-          <mat-menu #selectMenu="matMenu">
-            <button mat-menu-item (click)="onSelectByRating()">{{ t('selectByRating') }}</button>
-          </mat-menu>
-          <section style="padding-left: 8px;">
-            <div class="example-button-container">
-              <button mat-fab (click)="onPrintWithOptions()" [disabled]="!selectedFile">
-                <mat-icon>print</mat-icon>
-              </button>
-            </div>
-          </section>
-        </mat-toolbar-row>
-      </mat-toolbar>
-
-      <div class="container">
-        <mat-form-field class="w-full">
-          <mat-label>{{ t('filter') }}</mat-label>
-          <input matInput (keyup)="applyFilter($event)" #input>
-        </mat-form-field>
-
-        <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8 w-full">
-          <!-- ID Column -->
-          <ng-container matColumnDef="id">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by ID"> {{ t('id') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <!-- Checkbox Column -->
-          <ng-container matColumnDef="select">
-            <th mat-header-cell *matHeaderCellDef>
-              <mat-checkbox (change)="$event ? toggleAllRows() : null"
-                            [checked]="selection.hasValue() && isAllSelected()"
-                            [indeterminate]="selection.hasValue() && !isAllSelected()">
-              </mat-checkbox>
-            </th>
-            <td mat-cell *matCellDef="let row">
-              <mat-checkbox (click)="$event.stopPropagation()"
-                            (change)="$event ? selection.toggle(row) : null"
-                            [checked]="selection.isSelected(row)">
-              </mat-checkbox>
-            </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <!-- Subject Column -->
-          <ng-container matColumnDef="subject">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by subject"> {{ t('subject') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.subject}} </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <!-- Author Column -->
-          <ng-container matColumnDef="author">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by author"> {{ t('chineseExercises.author') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.author}} </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <!-- Content Column -->
-          <ng-container matColumnDef="content">
-            <th mat-header-cell *matHeaderCellDef> {{ t('content') }} </th>
-            <td mat-cell *matCellDef="let element">
-              <mat-form-field class="control-full-width">
-                <textarea matNativeControl readonly [ngModel]="getDisplayContentText(element)"></textarea>
-              </mat-form-field>
-            </td>
-            <td mat-footer-cell *matFooterCellDef> {{ t('totalRecords') }}: {{reciteContentCount}} </td>
-          </ng-container>
-
-          <!-- Source column -->
-          <ng-container matColumnDef="source">
-            <th mat-header-cell *matHeaderCellDef> {{ t('source') }} </th>
-            <td mat-cell *matCellDef="let element">{{element.source ?? ''}}</td>
-            <td mat-footer-cell *matFooterCellDef> {{ t('totalSelections') }}: {{selection.selected.length}} </td>
-          </ng-container>
-
-          <!-- Rating Column -->
-          <ng-container matColumnDef="rating">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by rating"> {{ t('rating') }} </th>
-            <td mat-cell *matCellDef="let element">
-              <mat-button-toggle-group [ngModel]="getRating(element.id)" aria-label="Rating"
-                (change)="onContentRatingChanged(element, $event)">
-                <mat-button-toggle [value]="1">1</mat-button-toggle>
-                <mat-button-toggle [value]="2">2</mat-button-toggle>
-                <mat-button-toggle [value]="3">3</mat-button-toggle>
-                <mat-button-toggle [value]="4">4</mat-button-toggle>
-                <mat-button-toggle [value]="5">5</mat-button-toggle>
-              </mat-button-toggle-group>
-            </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="displayedPreviewColumns; sticky: true"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedPreviewColumns;"></tr>
-          <tr mat-footer-row *matFooterRowDef="displayedPreviewColumns; sticky: true"></tr>
-        </table>
-        <mat-paginator [pageSizeOptions]="[20, 50, 100]"
-          showFirstLastButtons
-          aria-label="Select page of periodic elements">
-        </mat-paginator>
-      </div>
-    }
-
-    @if (isRecitingInProgress) {
-    }
-
-    @if (isRecitingCompleted) {
-    }
+    <app-chinese-exercises-list
+      [allFiles]="allFiles()"
+      [(selectedFile)]="selectedFile"
+      [isLoadingContents]="isLoadingContents()"
+      [dataSource]="dataSource"
+      [selection]="selection"
+      [contentRatings]="contentRatingMap()"
+      [filterDefinition]="filterDefinition()"
+      [appliedFreeText]="freeText()"
+      (fileSelectionChanged)="onFileSelectionChanged($event)"
+      (freeTextChanged)="onFreeTextChanged($event)"
+      (defineFilter)="onDefineFilter()"
+      (clearFilter)="onClearFilter()"
+      (quickSelect)="onQuickSelect($event)"
+      (selectAllVisible)="onSelectAllVisible()"
+      (clearSelection)="onClearSelection()"
+      (allRowsToggled)="toggleAllRows()"
+      (contentRatingChanged)="onContentRatingChanged($event.item, $event.event)"
+      (recite)="onStartWithOptions()"
+      (print)="onPrintWithOptions()">
+    </app-chinese-exercises-list>
   </div>
 </main>
 
-<app-footer></app-footer>
\ No newline at end of file
+<app-footer></app-footer>
diff --git a/src/app/pages/chinese-exercises/chinese-exercises.component.scss b/src/app/pages/chinese-exercises/chinese-exercises.component.scss
index 3f23ae4..cab98db 100644
--- a/src/app/pages/chinese-exercises/chinese-exercises.component.scss
+++ b/src/app/pages/chinese-exercises/chinese-exercises.component.scss
@@ -12,17 +12,3 @@
   align-content: center;
   justify-content: center;
 }
-
-.toolbar-spacer {
-  flex: 1 1 auto;
-}
-
-.toolbar-item {
-  margin: 4px;
-}
-
-.toolbar-button-container {
-  display: flex;
-  justify-content: center;
-  width: 120px;
-}
diff --git a/src/app/pages/chinese-exercises/chinese-exercises.component.spec.ts b/src/app/pages/chinese-exercises/chinese-exercises.component.spec.ts
index dd8b9ba..79ef033 100644
--- a/src/app/pages/chinese-exercises/chinese-exercises.component.spec.ts
+++ b/src/app/pages/chinese-exercises/chinese-exercises.component.spec.ts
@@ -1,129 +1,93 @@
-import { SelectionModel } from '@angular/cdk/collections';
 import type { ComponentFixture } from '@angular/core/testing';
 import { TestBed } from '@angular/core/testing';
-import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { Title } from '@angular/platform-browser';
+import { MatDialog } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
-import { TranslocoTestingModule } from '@jsverse/transloco';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
+} from '@jsverse/transloco';
+import { FilterJoinType, FilterOperation, type IFilterDefinition } from 'actslib';
 import { of, throwError } from 'rxjs';
 import { vi } from 'vitest';
 
+
 import type { LearnChineseFileItem, LearningContent } from '../../interfaces';
-import { QuestionBankItemLevelEnum, RatingOperatorEnum } from '../../interfaces';
-import { LearningContentService } from '../../services/learning-content.service';
+import {
+  QuestionBankItemLevelEnum,
+  SelectionModeEnum,
+} from '../../interfaces';
+import { LearningContentService, UIService } from '../../services';
 import { LearningRatingService } from '../../services/learning-rating.service';
-import { UIService } from '../../services/ui.service';
+import { SharedFilterDialogComponent } from '../../shared/filter-dialog';
 import { AppPageTitle } from '../page-title/page-title';
 
-import {
-  ChineseExercisesComponent,
-  ChineseExercisesOptionsDialogComponent,
-  ChineseExercisesPrintOptionsDialogComponent,
-  ChineseSelectByRatingDialogComponent,
-} from './chinese-exercises.component';
+import { ChineseExercisesOptionsDialogComponent } from './chinese-exercises-options-dialog.component';
+import { ChineseExercisesPrintOptionsDialogComponent } from './chinese-exercises-printoptions-dialog.component';
+import { ChineseExercisesSelectDialogComponent } from './chinese-exercises-select-dialog.component';
+import { ChineseExercisesComponent } from './chinese-exercises.component';
+
+const mockLearningContents: LearningContent[] = [
+  { id: 1, categoryId: 4, nameEnglish: 'File1', nameChinese: '文件一', fileUrl: 'data/file1.json' },
+  { id: 2, categoryId: 4, nameEnglish: 'File2', nameChinese: '文件二', fileUrl: 'data/file2.json' },
+];
+
+const mockLearnChineseFileItem: LearnChineseFileItem[] = [
+  { id: 1, subject: '静夜思', author: '李白', content: '床前明月光' },
+  { id: 2, subject: '春晓', author: '孟浩然', content: '春眠不觉晓' },
+];
+
+function mockTranslocoService() {
+  return {
+    setActiveLang: vi.fn(),
+    getActiveLang: vi.fn(),
+    selectTranslate: vi.fn().mockReturnValue(of('')),
+    _loadDependencies: vi.fn().mockReturnValue(of(null)),
+    translate: vi.fn((key: string) => key),
+    activeLang: 'en',
+    config: { reRenderOnLangChange: true, prodMode: false },
+    langChanges$: of('en'),
+    events$: of(),
+  };
+}
 
 describe('ChineseExercisesComponent', () => {
   let component: ChineseExercisesComponent;
   let fixture: ComponentFixture<ChineseExercisesComponent>;
-  let contentServiceSpy: any;
-  let ratingServiceSpy: any;
-  let dialogSpy: any;
-  let uiServiceSpy: any;
-  let routerSpy: any;
-
-  const mockLearningContents: LearningContent[] = [
-    {
-      id: 1,
-      categoryId: 4,
-      nameChinese: '测试文件1',
-      nameEnglish: 'Test File 1',
-      fileUrl: 'storage/learnchinese/test1.json',
-      version: 1,
-    },
-    {
-      id: 2,
-      categoryId: 4,
-      nameChinese: '测试文件2',
-      nameEnglish: 'Test File 2',
-      fileUrl: 'storage/learnchinese/test2.json',
-      version: 2,
-    },
-  ];
-
-  const mockLearnChineseFileItem: LearnChineseFileItem[] = [
-    {
-      subject: 'Test Subject 1',
-      author: 'Test Author 1',
-      content: 'Test Content 1',
-    },
-    {
-      subject: 'Test Subject 2',
-      author: 'Test Author 2',
-      content: 'Test Content 2',
-    },
-  ];
+  let mockLearningContentService: any;
+  let mockUIService: any;
+  let mockRouter: any;
+  let mockDialog: any;
+  let mockRatingService: any;
 
   beforeEach(async () => {
-    const contentSpy = {
-      getChineseContents: vi.fn(),
+    mockLearningContentService = {
+      getChineseContents: vi.fn().mockReturnValue(of(mockLearningContents)),
       getChineseFileContent: vi.fn(),
-      getStorageFileUrl: vi.fn((url: string) => `http://test-api/${url.replace('storage/', '')}`),
-    };
-
-    const ratingSpy = {
-      getRatings: vi.fn(),
-      upsertRating: vi.fn(),
     };
-
-    const matDialogSpy = { open: vi.fn() };
-    const uiSpy = { setSelectedExerciseItem: vi.fn() };
-    const routeSpy = { navigate: vi.fn() };
-
-    // Mock Title service
-    const titleSpy = { setTitle: vi.fn() };
-
-    // Create a minimal mock class that doesn't have dependencies
-    class MockAppPageTitle {
-      _title = '';
-      _originalTitle = 'Knowledge Builder';
-
-      get title(): string {
-        return this._title;
-      }
-
-      set title(value: string) {
-        this._title = value;
-      }
-    }
+    mockUIService = { setSelectedExerciseItem: vi.fn() };
+    mockRouter = { navigate: vi.fn() };
+    mockDialog = { open: vi.fn() };
+    mockRatingService = { getRatings: vi.fn().mockReturnValue(of([])), upsertRating: vi.fn() };
 
     await TestBed.configureTestingModule({
-      imports: [
-        ChineseExercisesComponent,
-        TranslocoTestingModule.forRoot({
-          langs: { en: {}, 'zh-CN': {} },
-          translocoConfig: {
-            availableLangs: ['en', 'zh-CN'],
-            defaultLang: 'en',
-          },
-          preloadLangs: true,
-        }),
-      ],
+      imports: [ChineseExercisesComponent, NoopAnimationsModule],
       providers: [
-        { provide: AppPageTitle, useClass: MockAppPageTitle },
-        { provide: LearningContentService, useValue: contentSpy },
-        { provide: LearningRatingService, useValue: ratingSpy },
-        { provide: MatDialog, useValue: matDialogSpy },
-        { provide: UIService, useValue: uiSpy },
-        { provide: Router, useValue: routeSpy },
-        { provide: Title, useValue: titleSpy },
+        { provide: LearningContentService, useValue: mockLearningContentService },
+        { provide: UIService, useValue: mockUIService },
+        { provide: Router, useValue: mockRouter },
+        { provide: MatDialog, useValue: mockDialog },
+        { provide: LearningRatingService, useValue: mockRatingService },
+        { provide: AppPageTitle, useValue: { title: '' } as AppPageTitle },
+        { provide: TranslocoService, useValue: mockTranslocoService() },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
       ],
     }).compileComponents();
 
-    contentServiceSpy = TestBed.inject(LearningContentService) as any;
-    ratingServiceSpy = TestBed.inject(LearningRatingService) as any;
-    dialogSpy = TestBed.inject(MatDialog) as any;
-    uiServiceSpy = TestBed.inject(UIService) as any;
-    routerSpy = TestBed.inject(Router) as any;
     fixture = TestBed.createComponent(ChineseExercisesComponent);
     component = fixture.componentInstance;
   });
@@ -132,289 +96,441 @@ describe('ChineseExercisesComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  describe('Initialization', () => {
-    it('should initialize with default values', () => {
-      expect(component.allFiles).toEqual([]);
-      expect(component.selectedFile).toBeUndefined();
-      expect(component.currentStatus.status).toBeDefined();
-      expect(component.queueidx).toBe(-1);
-      expect(component.dataSource).toBeDefined();
-      expect(component.selection).toBeDefined();
+  describe('ngOnInit', () => {
+    it('should set page title to Chinese', () => {
+      fixture.detectChanges();
+      expect(component.pageTitle.title).toBe('Chinese');
+    });
+
+    it('should load all data files on initialization', () => {
+      fixture.detectChanges();
+      expect(mockLearningContentService.getChineseContents).toHaveBeenCalled();
+      expect(component.allFiles()).toEqual(mockLearningContents);
+      expect(component.isLoadingContents()).toBe(false);
     });
 
-    it('should load learn chinese data files on init', () => {
-      contentServiceSpy.getChineseContents.mockReturnValue(of(mockLearningContents));
+    it('should handle error when loading data files fails', () => {
+      mockLearningContentService.getChineseContents.mockReturnValue(
+        throwError(() => new Error('Load failed'))
+      );
+      vi.spyOn(console, 'error').mockImplementation(() => {});
 
-      component.ngOnInit();
+      fixture.detectChanges();
 
-      expect(contentServiceSpy.getChineseContents).toHaveBeenCalled();
-      expect(component.allFiles).toEqual(mockLearningContents);
+      expect(console.error).toHaveBeenCalled();
+      expect(component.isLoadingContents()).toBe(false);
     });
+  });
 
-    it('should mark the OnPush view for check after the file list arrives (no click needed)', () => {
-      // Regression: the file list lands in an async subscribe callback (not a
-      // template event, not an async pipe). With ChangeDetectionStrategy.OnPush
-      // the view is not marked dirty automatically, so the files dropdown stayed
-      // empty until a later DOM event triggered detection. The component must
-      // call markForCheck() once the list is ready.
-      contentServiceSpy.getChineseContents.mockReturnValue(of(mockLearningContents));
-      const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-      markForCheckSpy.mockClear();
+  describe('onFileSelectionChanged', () => {
+    it('should load file content when file is selected', () => {
+      mockLearningContentService.getChineseFileContent.mockReturnValue(of(mockLearnChineseFileItem));
 
-      component.ngOnInit();
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
 
-      expect(component.allFiles).toEqual(mockLearningContents);
-      expect(markForCheckSpy).toHaveBeenCalled();
+      expect(mockLearningContentService.getChineseFileContent).toHaveBeenCalledWith('data/file1.json');
+      expect(component.dataSource.data).toEqual(mockLearnChineseFileItem);
     });
 
-    it('should handle error when loading learn chinese data files', () => {
-      const errorSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
-      contentServiceSpy.getChineseContents.mockReturnValue(
-        throwError(() => new Error('Test error'))
+    it('should clear any existing selection when switching files', () => {
+      mockLearningContentService.getChineseFileContent.mockReturnValue(of(mockLearnChineseFileItem));
+      component.dataSource.data = mockLearnChineseFileItem.slice();
+      component.selection.select(mockLearnChineseFileItem[0]);
+      expect(component.selection.selected.length).toBe(1);
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+
+      expect(component.selection.isEmpty()).toBe(true);
+    });
+
+    it('should handle undefined file selection by clearing state', () => {
+      component.studyContentId = 5;
+      component.dataSource.data = mockLearnChineseFileItem.slice();
+
+      component.onFileSelectionChanged({ value: undefined } as any);
+
+      expect(component.dataSource.data.length).toBe(0);
+      expect(component.studyContentId).toBe(0);
+    });
+
+    it('should load ratings for the selected content and force a re-filter', () => {
+      mockLearningContentService.getChineseFileContent.mockReturnValue(of(mockLearnChineseFileItem));
+      mockRatingService.getRatings.mockReturnValue(
+        of([{ id: 1, contentId: 1, itemId: 2, rating: 4 }])
+      );
+      component.onFreeTextChanged('春晓');
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+
+      expect(mockRatingService.getRatings).toHaveBeenCalledWith(1);
+      expect(component.getRating(2)).toBe(4);
+      // The rating filter re-runs after ratings arrive: the row still matches
+      // the free text and nothing else.
+      expect(component.dataSource.filteredData.length).toBe(1);
+    });
+
+    it('should clear data and content id when file content fails to load', () => {
+      mockLearningContentService.getChineseFileContent.mockReturnValue(
+        throwError(() => new Error('Load failed'))
       );
+      vi.spyOn(console, 'error').mockImplementation(() => {});
 
-      component.ngOnInit();
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
 
-      expect(contentServiceSpy.getChineseContents).toHaveBeenCalled();
-      expect(errorSpy).toHaveBeenCalledWith(expect.any(Error));
+      expect(component.dataSource.data.length).toBe(0);
+      expect(component.studyContentId).toBe(0);
     });
   });
 
-  describe('File selection', () => {
+  describe('filter pipeline', () => {
     beforeEach(() => {
-      component.allFiles = mockLearningContents;
-      contentServiceSpy.getChineseFileContent.mockReturnValue(of(mockLearnChineseFileItem));
-      ratingServiceSpy.getRatings.mockReturnValue(of([]));
+      component.dataSource.data = mockLearnChineseFileItem.slice();
+    });
+
+    it('should apply live free text as a JSON filter and filter rows', () => {
+      component.onFreeTextChanged('春晓');
+
+      expect(component.dataSource.filter).toContain('春晓');
+      expect(component.dataSource.filteredData.length).toBe(1);
+    });
+
+    it('should restore all rows when free text is cleared', () => {
+      component.onFreeTextChanged('春晓');
+      component.onFreeTextChanged('');
+
+      expect(component.dataSource.filter).toBe('');
+      expect(component.dataSource.filteredData.length).toBe(2);
     });
 
-    it('should handle file selection change', () => {
-      const event = { value: mockLearningContents[0] } as any;
+    /** Wrap conditions in an AND root, as the shared dialog emits them. */
+    const andRoot = (
+      ...conditions: IFilterDefinition['conditions']
+    ): IFilterDefinition => ({ join: FilterJoinType.AND, conditions });
+
+    it('should apply conditions emitted by the shared filter dialog on submit', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ root: andRoot({ property: 'author', operation: FilterOperation.Equal, lowValue: '李白' }) })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      component.onFileSelectionChanged(event);
+      component.onDefineFilter();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(SharedFilterDialogComponent, expect.anything());
+      expect(component.dataSource.filteredData.length).toBe(1);
+      expect(component.dataSource.filteredData[0].subject).toBe('静夜思');
+    });
 
-      expect(contentServiceSpy.getChineseFileContent).toHaveBeenCalledWith(
-        'storage/learnchinese/test1.json'
+    it('should seed the dialog with the current definition', () => {
+      const seed = andRoot({ property: 'subject', operation: FilterOperation.Contains, lowValue: '春' });
+      component.filterDefinition.set(seed);
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onDefineFilter();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        SharedFilterDialogComponent,
+        expect.objectContaining({
+          data: expect.objectContaining({ root: seed }),
+        })
       );
-      expect(component.dataSource.data).toEqual(mockLearnChineseFileItem);
     });
 
-    it('should handle empty file content', () => {
-      contentServiceSpy.getChineseFileContent.mockReturnValue(of(undefined));
-      const event = { value: mockLearningContents[0] } as any;
+    it('should leave the filter untouched when the dialog is cancelled', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      component.onFileSelectionChanged(event);
+      component.onDefineFilter();
 
-      expect(component.dataSource.data).toEqual([]);
+      expect(component.dataSource.filter).toBe('');
+      expect(component.dataSource.filteredData.length).toBe(2);
+    });
+
+    it('should clear the filter definition', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ root: andRoot({ property: 'author', operation: FilterOperation.Equal, lowValue: '李白' }) })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+      component.onDefineFilter();
+      expect(component.dataSource.filteredData.length).toBe(1);
+
+      component.onClearFilter();
+
+      expect(component.dataSource.filter).toBe('');
+      expect(component.dataSource.filteredData.length).toBe(2);
+    });
+
+    it('should apply rating conditions with unrated (0) semantics', () => {
+      component.contentRatingMap.set(new Map([[2, 5]]));
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ root: andRoot({ property: 'rating', operation: FilterOperation.LessThan, lowValue: 1 }) })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onDefineFilter();
+
+      // Only the unrated row (rating 0 < 1) survives.
+      expect(component.dataSource.filteredData.length).toBe(1);
+      expect(component.dataSource.filteredData[0].id).toBe(1);
+    });
+
+    it('should apply nested AND/OR groups from the tree dialog', () => {
+      component.contentRatingMap.set(new Map([[1, 1]]));
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({
+          root: andRoot(
+            { property: 'subject', operation: FilterOperation.Contains, lowValue: '春晓' },
+            {
+              join: FilterJoinType.OR,
+              conditions: [
+                { property: 'author', operation: FilterOperation.Equal, lowValue: '孟浩然' },
+                { property: 'rating', operation: FilterOperation.GreaterOrEqual, lowValue: 4 },
+              ],
+            }
+          ),
+        })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onDefineFilter();
+
+      expect(component.dataSource.filteredData.length).toBe(1);
+      expect(component.dataSource.filteredData[0].id).toBe(2);
     });
   });
 
-  describe('Selection methods', () => {
+  describe('selection methods', () => {
     beforeEach(() => {
-      component.dataSource.data = [...mockLearnChineseFileItem];
-      component.selection = new SelectionModel<LearnChineseFileItem>(true, []);
+      component.dataSource.data = mockLearnChineseFileItem.slice();
     });
 
-    it('should select all rows when none are selected', () => {
+    it('isAllSelected should return true when all selected', () => {
+      component.selection.select(...mockLearnChineseFileItem);
+      expect(component.isAllSelected()).toBe(true);
+    });
+
+    it('isAllSelected should return false when not all selected', () => {
+      component.selection.select(mockLearnChineseFileItem[0]);
       expect(component.isAllSelected()).toBe(false);
+    });
 
+    it('toggleAllRows should select all when not all selected', () => {
       component.toggleAllRows();
-
-      expect(component.isAllSelected()).toBe(true);
-      expect(component.selection.selected.length).toBe(2);
+      expect(component.selection.selected.length).toBe(mockLearnChineseFileItem.length);
     });
 
-    it('should clear selection when all are selected', () => {
+    it('toggleAllRows should clear selection when all selected', () => {
       component.selection.select(...mockLearnChineseFileItem);
-      expect(component.isAllSelected()).toBe(true);
+      component.toggleAllRows();
+      expect(component.selection.selected.length).toBe(0);
+    });
+
+    it('toggleAllRows should scope to visible rows when a filter is active', () => {
+      component.onFreeTextChanged('春晓');
 
       component.toggleAllRows();
 
-      expect(component.selection.selected.length).toBe(0);
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockLearnChineseFileItem[1])).toBe(true);
     });
 
-    it('should return correct recite content count', () => {
-      component.dataSource.data = [...mockLearnChineseFileItem];
+    it('onClearSelection should drop every selected row', () => {
+      component.selection.select(mockLearnChineseFileItem[0], mockLearnChineseFileItem[1]);
+
+      component.onClearSelection();
 
-      expect(component.reciteContentCount).toBe(2);
+      expect(component.selection.isEmpty()).toBe(true);
+    });
+
+    it('onSelectAllVisible should replace the selection with the visible rows', () => {
+      component.selection.select(mockLearnChineseFileItem[0]);
+      component.onFreeTextChanged('春晓');
+
+      component.onSelectAllVisible();
+
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockLearnChineseFileItem[1])).toBe(true);
     });
   });
 
-  describe('Display content methods', () => {
-    it('should return display content without @ character for version 2 file', () => {
-      component.selectedFile = mockLearningContents[1];
-      const item = {
-        subject: 'Test',
-        contentlength: 1,
-        content1: 'Hello@World',
-      } as LearnChineseFileItem;
+  describe('onQuickSelect', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockLearnChineseFileItem.slice();
+    });
+
+    it("should open the select dialog in Free Selection mode for 'random' and apply the result", () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ selectedSelectMode: SelectionModeEnum.FreeSelection, countOfItems: 1 })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      const result = component.getDisplayContentText(item);
+      component.onQuickSelect('random');
 
-      expect(result).toBe('HelloWorld'); // @ symbol should be removed
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        ChineseExercisesSelectDialogComponent,
+        expect.objectContaining({ data: { mode: SelectionModeEnum.FreeSelection, rowCount: 2 } })
+      );
+      expect(component.selection.selected.length).toBe(1);
     });
 
-    it('should return display content without modification for version 1 file', () => {
-      component.selectedFile = mockLearningContents[0];
-      const item = {
-        subject: 'Test',
-        content: 'Hello@World',
-      } as LearnChineseFileItem;
+    it("should open the select dialog in By Count mode for 'sequence' and apply count + offset", () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ selectedSelectMode: SelectionModeEnum.ByCount, countOfItems: 1, countOfOffset: 1 })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      const result = component.getDisplayContentText(item);
+      component.onQuickSelect('sequence');
 
-      expect(result).toBe('Hello@World'); // @ symbol should remain
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        ChineseExercisesSelectDialogComponent,
+        expect.objectContaining({ data: { mode: SelectionModeEnum.ByCount, rowCount: 2 } })
+      );
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockLearnChineseFileItem[1])).toBe(true);
     });
 
-    it('should return content property if contentlength is not defined', () => {
-      component.selectedFile = mockLearningContents[0];
-      const item = {
-        subject: 'Test',
-        content: 'Direct Content',
-      } as LearnChineseFileItem;
+    it('should leave the selection untouched when the dialog is cancelled', () => {
+      component.selection.select(mockLearnChineseFileItem[0]);
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      const result = component.getDisplayContentText(item);
+      component.onQuickSelect('random');
 
-      expect(result).toBe('Direct Content');
+      expect(component.selection.selected.length).toBe(1);
     });
   });
 
-  describe('Status getters', () => {
-    it('should return correct status for Not Started', () => {
-      component.currentStatus.status = 0; // ChineseReciteStatusEnum.NotStarted
+  describe('onContentRatingChanged', () => {
+    it('should not save and should restore the previous selection when the toggle is deselected', () => {
+      // Clicking the active toggle in a mat-button-toggle-group deselects it,
+      // emitting change with value undefined.
+      component.contentRatingMap.set(new Map([[1, 3]]));
+      const event: any = {
+        value: undefined,
+        source: { value: 3, buttonToggleGroup: { value: undefined } },
+      };
+
+      component.onContentRatingChanged(mockLearnChineseFileItem[0], event);
 
-      expect(component.isRecitingNotStarted).toBe(true);
-      expect(component.isRecitingInProgress).toBe(false);
-      expect(component.isRecitingCompleted).toBe(false);
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+      expect(event.source.buttonToggleGroup.value).toBe(3);
     });
 
-    it('should return correct status for In Progress', () => {
-      component.currentStatus.status = 1; // ChineseReciteStatusEnum.InProgress
+    it('should save the rating and update the map', () => {
+      mockLearningContentService.getChineseFileContent.mockReturnValue(of(mockLearnChineseFileItem));
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+      mockRatingService.upsertRating.mockReturnValue(
+        of({ id: 9, contentId: 1, itemId: 1, rating: 5 })
+      );
+      const event: any = {
+        value: 5,
+        source: { value: undefined, buttonToggleGroup: { value: 5 } },
+      };
+
+      component.onContentRatingChanged(mockLearnChineseFileItem[0], event);
 
-      expect(component.isRecitingNotStarted).toBe(false);
-      expect(component.isRecitingInProgress).toBe(true);
-      expect(component.isRecitingCompleted).toBe(false);
+      expect(mockRatingService.upsertRating).toHaveBeenCalledWith(1, 1, 5);
+      expect(component.getRating(1)).toBe(5);
     });
 
-    it('should return correct status for Completed', () => {
-      component.currentStatus.status = 2; // ChineseReciteStatusEnum.Completed
+    it('should not save without a selected file content', () => {
+      const event: any = {
+        value: 4,
+        source: { value: undefined, buttonToggleGroup: { value: 4 } },
+      };
 
-      expect(component.isRecitingNotStarted).toBe(false);
-      expect(component.isRecitingInProgress).toBe(false);
-      expect(component.isRecitingCompleted).toBe(true);
-    });
-  });
+      component.onContentRatingChanged(mockLearnChineseFileItem[0], event);
 
-  describe('Filter methods', () => {
-    beforeEach(() => {
-      component.dataSource.data = [...mockLearnChineseFileItem];
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
     });
 
-    it('should apply filter to data source', () => {
-      const event = new Event('input');
-      Object.defineProperty(event, 'target', {
-        writable: true,
-        value: { value: 'Test Subject 1' },
-      });
+    it('should revert the toggle when the save fails', () => {
+      mockLearningContentService.getChineseFileContent.mockReturnValue(of(mockLearnChineseFileItem));
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+      mockRatingService.upsertRating.mockReturnValue(
+        throwError(() => new Error('Save failed'))
+      );
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+      const event: any = {
+        value: 5,
+        source: { value: undefined, buttonToggleGroup: { value: 5 } },
+      };
 
-      component.applyFilter(event);
+      component.onContentRatingChanged(mockLearnChineseFileItem[0], event);
 
-      expect(component.dataSource.filter).toBe('test subject 1');
-      expect(component.dataSource.filteredData.length).toBe(1);
-      expect(component.dataSource.filteredData[0].subject).toBe('Test Subject 1');
+      expect(event.source.buttonToggleGroup.value).toBe(0);
+      expect(component.getRating(1)).toBe(0);
     });
   });
 
-  describe('Dialog interactions', () => {
+  describe('onStartWithOptions', () => {
     beforeEach(() => {
-      component.dataSource.data = [...mockLearnChineseFileItem];
-      component.selectedFile = mockLearningContents[0];
-    });
-
-    it('should open options dialog with correct data when no items selected', () => {
-      const mockDialogRef = {
-        afterClosed: () => of(undefined),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onStartWithOptions();
-
-      expect(dialogSpy.open).toHaveBeenCalledWith(
-        expect.any(Function),
-        expect.objectContaining({
-          data: {
-            reciteContentCount: 2,
-            disableCount: false,
-            translationDisabled: undefined,
-          },
-          width: '500px',
-          height: '360px',
-        })
-      );
+      component.dataSource.data = mockLearnChineseFileItem.slice();
     });
 
-    it('should open options dialog with selected items count', () => {
+    it('should open options dialog with selection-driven payload', () => {
       component.selection.select(mockLearnChineseFileItem[0]);
-      const mockDialogRef = {
-        afterClosed: () => of(undefined),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
+      const mockDialogRef = { afterClosed: () => of(undefined) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
       component.onStartWithOptions();
 
-      expect(dialogSpy.open).toHaveBeenCalledWith(
-        expect.any(Function),
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        ChineseExercisesOptionsDialogComponent,
         expect.objectContaining({
           data: {
             reciteContentCount: 1,
             disableCount: true,
             translationDisabled: undefined,
           },
+          width: '500px',
+          height: '360px',
         })
       );
     });
 
-    it('should call onStart when dialog returns result', () => {
-      const mockResult = {
+    it('should store settings and call onStart when dialog returns result', () => {
+      const mockResult: any = {
         selectedLevel: QuestionBankItemLevelEnum.Medium,
         allowEmptyAnswer: true,
         countOfItems: 10,
       };
-      const mockDialogRef = {
-        afterClosed: () => of(mockResult),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-      vi.spyOn(component, 'onStart');
+      const mockDialogRef = { afterClosed: () => of(mockResult) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+      const startSpy = vi.spyOn(component, 'onStart');
 
       component.onStartWithOptions();
 
       expect(component.setting.selectedLevel).toBe(QuestionBankItemLevelEnum.Medium);
       expect(component.setting.allowEmptyAnswer).toBe(true);
       expect(component.setting.countOfItems).toBe(10);
-      expect(component.onStart).toHaveBeenCalled();
+      expect(startSpy).toHaveBeenCalled();
     });
 
     it('should not call onStart when dialog is cancelled', () => {
-      const mockDialogRef = {
-        afterClosed: () => of(undefined),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-      vi.spyOn(component, 'onStart');
+      const mockDialogRef = { afterClosed: () => of(undefined) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+      const startSpy = vi.spyOn(component, 'onStart');
 
       component.onStartWithOptions();
 
-      expect(component.onStart).not.toHaveBeenCalled();
+      expect(startSpy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('onPrintWithOptions', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockLearnChineseFileItem.slice();
     });
 
     it('should open print options dialog with correct data', () => {
-      const mockDialogRef = {
-        afterClosed: () => of(undefined),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
+      const mockDialogRef = { afterClosed: () => of(undefined) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
       component.onPrintWithOptions();
 
-      expect(dialogSpy.open).toHaveBeenCalledWith(
-        expect.any(Function),
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        ChineseExercisesPrintOptionsDialogComponent,
         expect.objectContaining({
           data: {
             reciteContentCount: 2,
@@ -437,11 +553,9 @@ describe('ChineseExercisesComponent', () => {
         printExecDate: true,
         execDate: new Date(),
       };
-      const mockDialogRef = {
-        afterClosed: () => of(mockResult),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-      vi.spyOn(component, 'onPrint');
+      const mockDialogRef = { afterClosed: () => of(mockResult) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+      const printSpy = vi.spyOn(component, 'onPrint');
 
       component.onPrintWithOptions();
 
@@ -450,26 +564,24 @@ describe('ChineseExercisesComponent', () => {
       expect(component.printSetting.printEntryDate).toBe(true);
       expect(component.printSetting.answerLineBreakPerItem).toBe(true);
       expect(component.printSetting.respectRetentionCurve).toBe(false);
-      expect(component.onPrint).toHaveBeenCalled();
+      expect(printSpy).toHaveBeenCalled();
     });
 
     it('should not call onPrint when dialog is cancelled', () => {
-      const mockDialogRef = {
-        afterClosed: () => of(undefined),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-      vi.spyOn(component, 'onPrint');
+      const mockDialogRef = { afterClosed: () => of(undefined) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+      const printSpy = vi.spyOn(component, 'onPrint');
 
       component.onPrintWithOptions();
 
-      expect(component.onPrint).not.toHaveBeenCalled();
+      expect(printSpy).not.toHaveBeenCalled();
     });
   });
 
   describe('Print functionality', () => {
     beforeEach(() => {
       component.dataSource.data = [...mockLearnChineseFileItem];
-      component.selectedFile = mockLearningContents[0];
+      component.selectedFile.set(mockLearningContents[0]);
       component.printSetting = {
         selectedLevel: QuestionBankItemLevelEnum.Medium,
         countOfItems: 20,
@@ -483,15 +595,25 @@ describe('ChineseExercisesComponent', () => {
 
       component.onPrint();
 
-      expect(uiServiceSpy.setSelectedExerciseItem).toHaveBeenCalled();
-      expect(routerSpy.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
+      expect(mockUIService.setSelectedExerciseItem).toHaveBeenCalled();
+      expect(mockRouter.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
     });
 
-    it('should print all items when none selected', () => {
+    it('should print all visible items when none selected', () => {
       component.onPrint();
 
-      expect(uiServiceSpy.setSelectedExerciseItem).toHaveBeenCalled();
-      expect(routerSpy.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
+      expect(callArgs?.[0].length).toBe(2);
+      expect(mockRouter.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
+    });
+
+    it('should scope the print queue to the filtered rows when a filter is active', () => {
+      component.onFreeTextChanged('春晓');
+
+      component.onPrint();
+
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
+      expect(callArgs?.[0].length).toBe(1);
     });
 
     it('should randomize and limit items when count exceeds setting', () => {
@@ -499,6 +621,7 @@ describe('ChineseExercisesComponent', () => {
       const manyItems: LearnChineseFileItem[] = [];
       for (let i = 0; i < 30; i++) {
         manyItems.push({
+          id: i + 1,
           subject: `Subject ${i}`,
           author: `Author ${i}`,
           content: `Content ${i}`,
@@ -509,15 +632,15 @@ describe('ChineseExercisesComponent', () => {
 
       component.onPrint();
 
-      const callArgs = uiServiceSpy.setSelectedExerciseItem.mock.lastCall;
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
       expect(callArgs?.[0].length).toBe(10);
-      expect(routerSpy.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
+      expect(mockRouter.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
     });
 
     it('should set order and id for print queues', () => {
       component.onPrint();
 
-      const callArgs = uiServiceSpy.setSelectedExerciseItem.mock.lastCall;
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
       const printQueues = callArgs?.[0];
 
       expect(printQueues[0].order).toBe(1);
@@ -529,28 +652,28 @@ describe('ChineseExercisesComponent', () => {
     });
 
     it('should include file name in form title', () => {
-      component.selectedFile = {
+      component.selectedFile.set({
         id: 99,
         categoryId: 4,
         nameChinese: 'Test File',
         nameEnglish: 'Test File',
         fileUrl: 'storage/learnchinese/test.json',
-      };
+      });
 
       component.onPrint();
 
-      const callArgs = uiServiceSpy.setSelectedExerciseItem.mock.lastCall;
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
       const printSetting = callArgs?.[1];
 
       expect(printSetting?.formTitle).toContain('Test File');
     });
 
     it('should use default title when no file selected', () => {
-      component.selectedFile = undefined;
+      component.selectedFile.set(undefined);
 
       component.onPrint();
 
-      const callArgs = uiServiceSpy.setSelectedExerciseItem.mock.lastCall;
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
       const printSetting = callArgs?.[1];
 
       expect(printSetting?.formTitle).toContain('Chinese Exercises');
@@ -561,480 +684,20 @@ describe('ChineseExercisesComponent', () => {
 
       component.onPrint();
 
-      const callArgs = uiServiceSpy.setSelectedExerciseItem.mock.lastCall;
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
       const printSetting = callArgs?.[1];
 
       expect(printSetting?.answerLineBreakPerItem).toBe(true);
     });
-
-    it('should default answerLineBreakPerItem to false when unset', () => {
-      component.printSetting.answerLineBreakPerItem = undefined;
-
-      component.onPrint();
-
-      const callArgs = uiServiceSpy.setSelectedExerciseItem.mock.lastCall;
-      const printSetting = callArgs?.[1];
-
-      expect(printSetting?.answerLineBreakPerItem).toBe(false);
-    });
-  });
-
-  describe('onSelectByRating', () => {
-    beforeEach(() => {
-      component.dataSource.data = [
-        { id: 1, subject: 'Subject 1', author: 'Author 1', content: 'Content 1' },
-        { id: 2, subject: 'Subject 2', author: 'Author 2', content: 'Content 2' },
-        { id: 3, subject: 'Subject 3', author: 'Author 3', content: 'Content 3' },
-      ] as LearnChineseFileItem[];
-      // Set up ratings: id1=5, id2=3, id3=0 (unrated)
-      (component as any).contentRatingMap.set(1, 5);
-      (component as any).contentRatingMap.set(2, 3);
-      (component as any).contentRatingMap.set(3, 0);
-    });
-
-    it('should select items with rating equals 5', () => {
-      const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.Equals, ratingValue: 5 }),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe(1);
-    });
-
-    it('should select items with rating greater than 3', () => {
-      const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.GreaterThan, ratingValue: 3 }),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe(1);
-    });
-
-    it('should select items with any rating (>= 1)', () => {
-      // ratings: id1=5, id2=3, id3=0. LargerOrEquals 1 → id1, id2 (any rated).
-      const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 }),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(2);
-    });
-
-    it('should select items with no rating (< 1)', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 1 → only id3 (unrated, 0 < 1).
-      const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 }),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe(3);
-    });
-
-    it('should select items with rating below the value, including unrated (0)', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 4 → id2 (3) and id3 (0);
-      // unrated (0) compares numerically (0 < 4); use < 1 for unrated-only.
-      const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 4 }),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(2);
-      expect(component.selection.selected.some(i => i.id === 2)).toBe(true);
-      expect(component.selection.selected.some(i => i.id === 3)).toBe(true);
-    });
-
-    it('should select only unrated (0) items when no rated item is below the value', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 2 → only id3 (unrated, 0 < 2).
-      const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 2 }),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe(3);
-    });
-
-    it('should select items with rating larger or equals 3', () => {
-      // ratings: id1=5, id2=3, id3=0. LargerOrEquals 3 → id1, id2.
-      const mockDialogRef = {
-        afterClosed: () =>
-          of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 3 }),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(2);
-      expect(component.selection.selected.some(i => i.id === 1)).toBe(true);
-      expect(component.selection.selected.some(i => i.id === 2)).toBe(true);
-    });
-
-    it('should select items with rating less or equals 3, including unrated', () => {
-      // ratings: id1=5, id2=3, id3=0. LessOrEquals 3 → id2 (3) and id3 (0);
-      // unrated (0) compares numerically (0 <= 3).
-      const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 3 }),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(2);
-      expect(component.selection.selected.some(i => i.id === 2)).toBe(true);
-      expect(component.selection.selected.some(i => i.id === 3)).toBe(true);
-    });
-
-    it('should select only unrated (0) for less or equals when no rated item is at or below the value', () => {
-      // ratings: id1=5, id2=3, id3=0. LessOrEquals 2 → only id3 (unrated, 0 <= 2).
-      const mockDialogRef = {
-        afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 2 }),
-      } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe(3);
-    });
-
-    it('should preserve the existing selection when the dialog is cancelled', () => {
-      component.selection.select(component.dataSource.data[0]);
-      const initialCount = component.selection.selected.length;
-
-      const mockDialogRef = { afterClosed: () => of(undefined) } as MatDialogRef<any>;
-      dialogSpy.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      expect(component.selection.selected.length).toBe(initialCount);
-    });
-  });
-
-  describe('onContentRatingChanged', () => {
-    it('should save the rating via upsertRating when a level is chosen', () => {
-      ratingServiceSpy.upsertRating.mockReturnValue(of({ contentId: 1, itemId: 10, rating: 3 }));
-      component.studyContentId = 1;
-      const event = { value: 3, source: { value: 3, buttonToggleGroup: { value: 3 } } } as any;
-
-      component.onContentRatingChanged({ id: 10 } as any, event);
-
-      expect(ratingServiceSpy.upsertRating).toHaveBeenCalledWith(1, 10, 3);
-    });
-
-    it('should not save and should restore the previous selection when the toggle is deselected', () => {
-      // Clicking the active toggle in a mat-button-toggle-group deselects it,
-      // emitting change with value undefined.
-      component.studyContentId = 1;
-      const group = { value: undefined as unknown };
-      const event = { value: undefined, source: { value: 3, buttonToggleGroup: group } } as any;
-
-      component.onContentRatingChanged({ id: 10 } as any, event);
-
-      expect(ratingServiceSpy.upsertRating).not.toHaveBeenCalled();
-      expect(group.value).toBe(3);
-    });
-  });
-});
-
-describe('ChineseExercisesOptionsDialogComponent', () => {
-  let component: ChineseExercisesOptionsDialogComponent;
-  let fixture: ComponentFixture<ChineseExercisesOptionsDialogComponent>;
-  let dialogRefSpy: any;
-
-  beforeEach(async () => {
-    const matDialogRefSpy = { close: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [ChineseExercisesOptionsDialogComponent],
-      providers: [
-        { provide: MatDialogRef, useValue: matDialogRefSpy },
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: { reciteContentCount: 20, disableCount: false, translationDisabled: false },
-        },
-      ],
-    }).compileComponents();
-
-    dialogRefSpy = TestBed.inject(MatDialogRef) as any;
-    fixture = TestBed.createComponent(ChineseExercisesOptionsDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with default values', () => {
-    expect(component.selectedLevel()).toBe(QuestionBankItemLevelEnum.Medium);
-    expect(component.allowEmptyAnswer()).toBe(false);
-    expect(component.countOfItems()).toBe(20);
-  });
-
-  it('should initialize with disabled count when disableCount is true', () => {
-    TestBed.resetTestingModule();
-    const matDialogRefSpy = { close: vi.fn() };
-
-    void TestBed.configureTestingModule({
-      imports: [ChineseExercisesOptionsDialogComponent],
-      providers: [
-        { provide: MatDialogRef, useValue: matDialogRefSpy },
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: { reciteContentCount: 15, disableCount: true, translationDisabled: false },
-        },
-      ],
-    }).compileComponents();
-
-    const newFixture = TestBed.createComponent(ChineseExercisesOptionsDialogComponent);
-    const newComponent = newFixture.componentInstance;
-
-    expect(newComponent.countOfItems()).toBe(15);
-  });
-
-  it('should close dialog without data when onNoClick is called', () => {
-    component.onNoClick();
-
-    expect(dialogRefSpy.close).toHaveBeenCalledWith();
-  });
-
-  it('should close dialog with selected options when onYesClick is called', () => {
-    component.selectedLevel.set(QuestionBankItemLevelEnum.Hard);
-    component.allowEmptyAnswer.set(true);
-    component.countOfItems.set(30);
-
-    component.onYesClick();
-
-    expect(dialogRefSpy.close).toHaveBeenCalledWith({
-      selectedLevel: QuestionBankItemLevelEnum.Hard,
-      countOfItems: 30,
-      allowEmptyAnswer: true,
-    });
-  });
-
-  it('should expose getQuestionBankLevelName function', () => {
-    expect(component.getQuestionBankLevelName).toBeDefined();
-    expect(typeof component.getQuestionBankLevelName).toBe('function');
-  });
-
-  it('should have all levels available', () => {
-    expect(component.allLevels).toBeDefined();
-    expect(Array.isArray(component.allLevels)).toBe(true);
-    expect(component.allLevels.length).toBeGreaterThan(0);
-  });
-});
-
-describe('ChineseExercisesPrintOptionsDialogComponent', () => {
-  let component: ChineseExercisesPrintOptionsDialogComponent;
-  let fixture: ComponentFixture<ChineseExercisesPrintOptionsDialogComponent>;
-  let dialogRefSpy: any;
-
-  beforeEach(async () => {
-    const matDialogRefSpy = { close: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [
-        ChineseExercisesPrintOptionsDialogComponent,
-        TranslocoTestingModule.forRoot({
-          langs: { en: {}, 'zh-CN': {} },
-          translocoConfig: {
-            availableLangs: ['en', 'zh-CN'],
-            defaultLang: 'en',
-          },
-          preloadLangs: true,
-        }),
-      ],
-      providers: [
-        { provide: MatDialogRef, useValue: matDialogRefSpy },
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: { reciteContentCount: 20, disableCount: false, translationDisabled: false },
-        },
-      ],
-    }).compileComponents();
-
-    dialogRefSpy = TestBed.inject(MatDialogRef) as any;
-    fixture = TestBed.createComponent(ChineseExercisesPrintOptionsDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with default values', () => {
-    expect(component.selectedLevel()).toBe(QuestionBankItemLevelEnum.Medium);
-    expect(component.countOfItems()).toBe(20);
-    expect(component.printEntryDate()).toBe(true);
-    expect(component.selectedExecDateModel()).toBe(0);
-  });
-
-  it('should initialize with disabled count when disableCount is true', () => {
-    TestBed.resetTestingModule();
-    const matDialogRefSpy = { close: vi.fn() };
-
-    void TestBed.configureTestingModule({
-      imports: [
-        ChineseExercisesPrintOptionsDialogComponent,
-        TranslocoTestingModule.forRoot({
-          langs: { en: {}, 'zh-CN': {} },
-          translocoConfig: {
-            availableLangs: ['en', 'zh-CN'],
-            defaultLang: 'en',
-          },
-          preloadLangs: true,
-        }),
-      ],
-      providers: [
-        { provide: MatDialogRef, useValue: matDialogRefSpy },
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: { reciteContentCount: 25, disableCount: true, translationDisabled: false },
-        },
-      ],
-    }).compileComponents();
-
-    const newFixture = TestBed.createComponent(ChineseExercisesPrintOptionsDialogComponent);
-    const newComponent = newFixture.componentInstance;
-
-    expect(newComponent.countOfItems()).toBe(25);
   });
 
-  it('should close dialog without data when onNoClick is called', () => {
-    component.onNoClick();
-
-    expect(dialogRefSpy.close).toHaveBeenCalledWith();
-  });
+  describe('visibleRowCount', () => {
+    it('should reflect the filtered count when a filter is active', () => {
+      component.dataSource.data = mockLearnChineseFileItem.slice();
+      expect(component.visibleRowCount).toBe(2);
 
-  it('should close dialog with print options when onYesClick is called with exec date model 0', () => {
-    component.selectedLevel.set(QuestionBankItemLevelEnum.Easy);
-    component.countOfItems.set(25);
-    component.printEntryDate.set(false);
-    component.selectedExecDateModel.set(0);
-
-    component.onYesClick();
-
-    expect(dialogRefSpy.close).toHaveBeenCalledWith({
-      selectedLevel: QuestionBankItemLevelEnum.Easy,
-      countOfItems: 25,
-      printEntryDate: false,
-      answerLineBreakPerItem: true,
-      respectRetentionCurve: false,
-      printExecDate: false,
-      execDate: undefined,
+      component.onFreeTextChanged('春晓');
+      expect(component.visibleRowCount).toBe(1);
     });
   });
-
-  it('should close dialog with respectRetentionCurve true when exec date model is 1', () => {
-    component.selectedExecDateModel.set(1);
-
-    component.onYesClick();
-
-    expect(dialogRefSpy.close).toHaveBeenCalledWith(
-      expect.objectContaining({
-        respectRetentionCurve: true,
-        printExecDate: false,
-        execDate: undefined,
-      })
-    );
-  });
-
-  it('should close dialog with printExecDate and execDate when exec date model is 2', () => {
-    const testDate = new Date(2024, 0, 1);
-    component.selectedExecDateModel.set(2);
-    component.execDate.set(testDate);
-
-    component.onYesClick();
-
-    expect(dialogRefSpy.close).toHaveBeenCalledWith(
-      expect.objectContaining({
-        respectRetentionCurve: false,
-        printExecDate: true,
-        execDate: testDate,
-      })
-    );
-  });
-
-  it('should have all levels and print exec dates available', () => {
-    expect(component.allLevels).toBeDefined();
-    expect(Array.isArray(component.allLevels)).toBe(true);
-    expect(component.allPrintExecDates).toBeDefined();
-    expect(Array.isArray(component.allPrintExecDates)).toBe(true);
-  });
-
-  it('should expose getQuestionBankLevelName function', () => {
-    expect(component.getQuestionBankLevelName).toBeDefined();
-    expect(typeof component.getQuestionBankLevelName).toBe('function');
-  });
-});
-
-describe('ChineseSelectByRatingDialogComponent', () => {
-  let component: ChineseSelectByRatingDialogComponent;
-  let fixture: ComponentFixture<ChineseSelectByRatingDialogComponent>;
-  let dialogRefSpy: any;
-
-  beforeEach(async () => {
-    const matDialogRefSpy = { close: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [
-        ChineseSelectByRatingDialogComponent,
-        TranslocoTestingModule.forRoot({
-          langs: { en: {}, 'zh-CN': {} },
-          translocoConfig: {
-            availableLangs: ['en', 'zh-CN'],
-            defaultLang: 'en',
-          },
-          preloadLangs: true,
-        }),
-      ],
-      providers: [
-        { provide: MatDialogRef, useValue: matDialogRefSpy },
-        { provide: MAT_DIALOG_DATA, useValue: {} },
-      ],
-    }).compileComponents();
-
-    dialogRefSpy = TestBed.inject(MatDialogRef) as any;
-    fixture = TestBed.createComponent(ChineseSelectByRatingDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should close with ratingOperator and ratingValue on confirm', () => {
-    component.ratingOperator.set(RatingOperatorEnum.GreaterThan);
-    component.ratingValue.set(3);
-    component.onYesClick();
-
-    expect(dialogRefSpy.close).toHaveBeenCalledWith({
-      ratingOperator: RatingOperatorEnum.GreaterThan,
-      ratingValue: 3,
-    });
-  });
-
-  it('ratingOperators should include Larger or Equals and Less or Equals', () => {
-    const values = component.ratingOperators.map(op => op.value);
-    expect(values).toContain(RatingOperatorEnum.LargerOrEquals);
-    expect(values).toContain(RatingOperatorEnum.LessOrEquals);
-    expect(component.ratingOperators.length).toBe(5);
-  });
 });
diff --git a/src/app/pages/chinese-exercises/chinese-exercises.component.ts b/src/app/pages/chinese-exercises/chinese-exercises.component.ts
index 3520769..12e62ff 100644
--- a/src/app/pages/chinese-exercises/chinese-exercises.component.ts
+++ b/src/app/pages/chinese-exercises/chinese-exercises.component.ts
@@ -4,99 +4,56 @@ import {
   Component,
   DestroyRef,
   inject,
-  Inject,
-  model,
-  ViewChild,
+  signal,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import type { MatButtonToggleChange } from '@angular/material/button-toggle';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import {
-  MAT_DIALOG_DATA,
-  MatDialog,
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
+import { MatDialog } from '@angular/material/dialog';
 import type { MatSelectChange } from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSort, MatSortModule } from '@angular/material/sort';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatDateFnsModule, provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
+import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
-import { TranslocoModule } from '@jsverse/transloco';
-import { zhCN } from 'date-fns/locale';
+import { FisherYatesShuffle, type IFilterDefinition } from 'actslib';
 
 import type {
-  ChineseReciteStatus,
-  LearnChineseFileItem,
+  ChineseListFilter,
   ChineseReciteOption,
   ChineseRecitePrintOption,
   KnowledgeExerciseFileContent,
   KnowledgeExercisePrintOption,
+  LearnChineseFileItem,
   LearningContent,
+  VocabularySelectOption,
 } from '../../interfaces';
 import {
-  ChineseReciteStatusEnum,
+  CHINESE_FILTER_PROPERTIES,
   QuestionBankItemLevelEnum,
-  getChineseReciteItemDisplayContent,
-  getAllPrintExecDateString,
-  MY_DATE_FORMATS,
-  getQuestionBankLevelName,
   QuestionBankTypeEnum,
-  getAllQuestionBankLevelEnumValues,
+  SelectionModeEnum,
   convertChineseReciteItemToKnowledge,
-  RatingOperatorEnum,
-  matchRating,
+  emptyChineseFilterDefinition,
+  getQuestionBankLevelName,
+  isChineseListFilterEmpty,
+  matchChineseListFilter,
 } from '../../interfaces';
 import { LearningContentService, LearningRatingService, UIService } from '../../services';
+import type {
+  FilterDialogData,
+  FilterDialogResult,
+} from '../../shared/filter-dialog/filter-dialog-model';
+import { SharedFilterDialogComponent } from '../../shared/filter-dialog/filter-dialog.component';
 import { FooterComponent } from '../../shared/footer/footer';
-import { fisherYatesShuffle } from '../../shared/utils/shuffle';
 import { AppPageTitle } from '../page-title/page-title';
 
+import { ChineseExercisesListComponent } from './chinese-exercises-list.component';
+import { ChineseExercisesOptionsDialogComponent } from './chinese-exercises-options-dialog.component';
+import { ChineseExercisesPrintOptionsDialogComponent } from './chinese-exercises-printoptions-dialog.component';
+import { ChineseExercisesSelectDialogComponent } from './chinese-exercises-select-dialog.component';
+
 @Component({
   selector: 'app-chinese-exercises',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    FooterComponent,
-    MatToolbarModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    FormsModule,
-    MatIconModule,
-    MatButtonModule,
-    MatTableModule,
-    MatCheckboxModule,
-    MatDividerModule,
-    MatProgressBarModule,
-    MatPaginatorModule,
-    MatSortModule,
-    MatButtonToggleModule,
-    MatProgressSpinnerModule,
-    MatTooltipModule,
-    MatMenuModule,
-    TranslocoModule,
-  ],
+  imports: [FooterComponent, ChineseExercisesListComponent],
   templateUrl: './chinese-exercises.component.html',
   styleUrl: './chinese-exercises.component.scss',
   host: {
@@ -104,101 +61,91 @@ import { AppPageTitle } from '../page-title/page-title';
   },
 })
 export class ChineseExercisesComponent implements OnInit {
-  allFiles: LearningContent[] = [];
-  selectedFile?: LearningContent;
-  isLoadingContents = true;
-  currentStatus: ChineseReciteStatus = {
-    status: ChineseReciteStatusEnum.NotStarted,
-    //level: ChineseReciteLevelEnum.Normal,
-    correctCount: 0,
-    incorrectCount: 0,
-    totalCount: 0,
-    startTime: new Date(),
-    endTime: new Date(),
-  };
-  queueidx: number = -1; // Current Queue
-  countOfInputableItems = 0; // Count of the items which allows for input.
-  displayedPreviewColumns = ['select', 'id', 'subject', 'author', 'content', 'source', 'rating'];
-  private contentRatingMap = new Map<number, number>();
+  allFiles = signal<LearningContent[]>([]);
+  selectedFile = signal<LearningContent | undefined>(undefined);
+  isLoadingContents = signal(true);
+  // Table for content (rendered by the list child component, which also wires
+  // the paginator/sort it owns onto this shared data source).
+  dataSource: MatTableDataSource<LearnChineseFileItem> = new MatTableDataSource();
+  selection = new SelectionModel<LearnChineseFileItem>(true, []);
+  // Ratings of the loaded file's items. Replaced (not mutated) on every update
+  // so the new reference reaches the OnPush list child as an input.
+  contentRatingMap = signal(new Map<number, number>());
+  // Filter bar: the container is the single source of truth for the applied
+  // condition definition (it opens the shared filter dialog). freeText is fed
+  // back from the child's live input via freeTextChanged.
+  freeText = signal('');
+  filterDefinition = signal<IFilterDefinition>(emptyChineseFilterDefinition());
+  // Parsed form of the active list filter; applyListFilter keeps it in sync
+  // with dataSource.filter so the row predicate does not JSON.parse per row.
+  // Null means no filter (MatTable skips the predicate for an empty filter).
+  private listFilterCriteria: ChineseListFilter | null = null;
   // Title
   pageTitle: AppPageTitle = inject(AppPageTitle);
-
-  paginator!: MatPaginator;
-  @ViewChild(MatPaginator, { static: false })
-  set content(content: MatPaginator) {
-    if (content) {
-      // initially setter gets called with undefined
-      this.paginator = content;
-      this.dataSource.paginator = this.paginator;
-    }
-  }
-  @ViewChild(MatSort) sort?: MatSort;
-  dataSource: MatTableDataSource<LearnChineseFileItem> = new MatTableDataSource();
-  // Dialog
+  // Service
+  private readonly contentService = inject(LearningContentService);
   readonly dialog = inject(MatDialog);
+  private readonly ratingService = inject(LearningRatingService);
+  private readonly destroyRef = inject(DestroyRef);
   readonly uiService = inject(UIService);
+  // Navigation
   readonly router = inject(Router);
-  private readonly contentService = inject(LearningContentService);
-  private readonly ratingService = inject(LearningRatingService);
   // Maps selected file to backend ContentId
   studyContentId = 0;
+  // Latest rating the user requested per item in the list view; upsert
+  // responses that arrive out of order are dropped against this map.
+  private pendingContentRatings = new Map<number, number>();
+  // Monotonic token of the current file load. Rapid file switches are
+  // last-click-wins: a slow response from a previous file must not overwrite
+  // the newly selected file's data/ratings (both loads compare against it).
+  private fileLoadToken = 0;
+  // Recite options.
   setting: ChineseReciteOption = {
     selectedLevel: QuestionBankItemLevelEnum.Full,
     allowEmptyAnswer: false,
     countOfItems: 20,
   };
+  // Print options.
   printSetting: ChineseRecitePrintOption = {
     selectedLevel: QuestionBankItemLevelEnum.Full,
     countOfItems: 20,
     respectRetentionCurve: false,
     printEntryDate: false,
   };
-  selection = new SelectionModel<LearnChineseFileItem>(true, []);
-  subjectFilter = '';
-  authorFilter = '';
-  contentFilter = '';
 
-  /** Whether the number of selected elements matches the total number of rows. */
+  /** Rows the table currently shows: the filtered count when a filter is active. */
+  get visibleRowCount(): number {
+    return this.dataSource.filter
+      ? this.dataSource.filteredData.length
+      : this.dataSource.data.length;
+  }
+
+  /**
+   * Whether every visible row is selected. Comparing against the visible rows
+   * (not just counts) keeps the header checkbox honest when the selection also
+   * contains rows the current filter hides.
+   */
   isAllSelected() {
-    const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
-    return numSelected === numRows;
+    const visible = this.getVisibleData();
+    return visible.length > 0 && visible.every(row => this.selection.isSelected(row));
   }
 
-  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  /**
+   * Selects all visible rows if they are not all selected; otherwise clear
+   * selection. Scoped to the filtered rows so the table filter keeps
+   * describing what the exercises will use (see getVisibleData).
+   * Replaces any previous selection: it may still contain rows the current
+   * filter hides, and hidden rows would otherwise leak into the exercises.
+   */
   toggleAllRows() {
     if (this.isAllSelected()) {
       this.selection.clear();
       return;
     }
 
-    this.selection.select(...this.dataSource.data);
-  }
-
-  get isRecitingNotStarted(): boolean {
-    return this.currentStatus.status === ChineseReciteStatusEnum.NotStarted;
-  }
-  get isRecitingInProgress(): boolean {
-    return this.currentStatus.status === ChineseReciteStatusEnum.InProgress;
-  }
-  get isRecitingCompleted(): boolean {
-    return this.currentStatus.status === ChineseReciteStatusEnum.Completed;
-  }
-  get reciteContentCount(): number {
-    return this.dataSource.data.length;
-  }
-
-  getDisplayContentText(cont: LearnChineseFileItem): string {
-    if (this.selectedFile?.version === 2) {
-      return getChineseReciteItemDisplayContent(cont).replaceAll('@', '');
-    }
-
-    return getChineseReciteItemDisplayContent(cont);
+    this.selection.setSelection(...this.getVisibleData());
   }
 
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly cdr = inject(ChangeDetectorRef);
-
   constructor() {
     this.dataSource.sortingDataAccessor = (
       data: LearnChineseFileItem,
@@ -214,10 +161,14 @@ export class ChineseExercisesComponent implements OnInit {
       const value = data[key];
       return typeof value === 'string' ? value.toLowerCase() : (value ?? 0);
     };
-  }
-
-  private getDefaultFormTitle(): string {
-    return 'Chinese Exercises';
+    // Filter bar criteria travel through MatTableDataSource's single string
+    // channel as JSON; applyListFilter parses it once into listFilterCriteria
+    // (the rating lives in contentRatingMap, so the predicate closes over
+    // `this` to reach both via getRating).
+    this.dataSource.filterPredicate = (
+      data: LearnChineseFileItem
+    ): boolean =>
+      matchChineseListFilter(data, this.getRating(data.id), this.listFilterCriteria!);
   }
 
   ngOnInit(): void {
@@ -227,108 +178,369 @@ export class ChineseExercisesComponent implements OnInit {
       .getChineseContents()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
-      next: contents => {
-        this.allFiles = contents;
-        this.isLoadingContents = false;
-        // OnPush: the file list arrives in an async subscribe callback, so the
-        // view is not marked dirty automatically — without this the files
-        // dropdown stays empty until a later DOM event triggers detection.
-        this.cdr.markForCheck();
-      },
-      error: err => {
-        console.error(err);
-        this.isLoadingContents = false;
-        this.cdr.markForCheck();
-      },
+        next: contents => {
+          this.allFiles.set(contents);
+          this.isLoadingContents.set(false);
+        },
+        error: err => {
+          console.error(err);
+          this.isLoadingContents.set(false);
+        },
+      });
+  }
+
+  // ── Filter bar ──────────────────────────────────────────────────
+
+  applyListFilter(criteria: ChineseListFilter) {
+    // Parsed once here; the row predicate reads this field instead of
+    // JSON.parse-ing the filter string for every row.
+    this.listFilterCriteria = isChineseListFilterEmpty(criteria) ? null : criteria;
+    // An empty filter string keeps the "no filter" contract the rest of the
+    // page relies on (visibleRowCount, getVisibleData).
+    this.dataSource.filter = this.listFilterCriteria === null
+      ? ''
+      : JSON.stringify(criteria);
+  }
+
+  onFreeTextChanged(text: string): void {
+    this.freeText.set(text);
+    this.applyCurrentFilter();
+  }
+
+  onDefineFilter(): void {
+    this.dialog
+      .open<SharedFilterDialogComponent, FilterDialogData, FilterDialogResult | undefined>(
+        SharedFilterDialogComponent,
+        {
+          data: {
+            properties: CHINESE_FILTER_PROPERTIES,
+            root: this.filterDefinition(),
+          },
+          // Tree navigator + detail pane sit side by side; the splitter can
+          // resize them but needs the extra width to start from.
+          width: '880px',
+          enterAnimationDuration: 800,
+          exitAnimationDuration: 500,
+        }
+      )
+      .afterClosed()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(result => {
+        // undefined (Cancel / backdrop / Esc) leaves the previous filter untouched.
+        if (result !== undefined) {
+          this.filterDefinition.set(result.root);
+          this.applyCurrentFilter();
+        }
+      });
+  }
+
+  onClearFilter(): void {
+    this.filterDefinition.set(emptyChineseFilterDefinition());
+    this.applyCurrentFilter();
+  }
+
+  private applyCurrentFilter(): void {
+    this.applyListFilter({
+      freeText: this.freeText(),
+      root: this.filterDefinition(),
     });
   }
 
+  // ── Ratings ─────────────────────────────────────────────────────
+
+  getRating(itemId: number | undefined): number {
+    if (itemId === undefined) {
+      return 0;
+    }
+    return this.contentRatingMap().get(itemId) ?? 0;
+  }
+
+  onContentRatingChanged(item: LearnChineseFileItem, event: MatButtonToggleChange) {
+    if (event.value === undefined || event.value === null || event.value < 1) {
+      // Clicking the active toggle deselects it (value becomes undefined).
+      // There is no "clear rating" operation, so restore the previous selection.
+      event.source.buttonToggleGroup.value = event.source.value;
+      return;
+    }
+    if (this.studyContentId <= 0 || item.id === undefined) {
+      return;
+    }
+    const itemId = item.id;
+
+    this.pendingContentRatings.set(itemId, event.value);
+    this.ratingService
+      .upsertRating(this.studyContentId, itemId, event.value)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (saved) => {
+          // Drop stale responses: a newer click on the same item is already
+          // in flight and its response will set the final value.
+          if (this.pendingContentRatings.get(itemId) !== event.value) {
+            return;
+          }
+          this.pendingContentRatings.delete(itemId);
+          this.contentRatingMap.update(m => new Map(m).set(itemId, saved.rating));
+          // The filter predicate closes over contentRatingMap, and a rating
+          // change does not change the filter string — reassign it to force a
+          // re-run while a filter is active, or the table shows stale rows.
+          if (this.dataSource.filter) {
+            this.dataSource.filter = this.dataSource.filter;
+          }
+        },
+        error: err => {
+          console.error('Failed to save rating', err);
+          // A newer click on the same item is in flight; its outcome decides
+          // the final value — reverting now would clobber it.
+          if (this.pendingContentRatings.get(itemId) !== event.value) {
+            return;
+          }
+          this.pendingContentRatings.delete(itemId);
+          // Revert the toggle to the last confirmed value so the view does
+          // not show a rating the server never saved. The [ngModel] binding
+          // value is unchanged (no writeValue runs), so the group must be
+          // reset directly, like the deselect path above.
+          event.source.buttonToggleGroup.value = this.getRating(item.id);
+        },
+      });
+  }
+
+  // ── File loading ────────────────────────────────────────────────
+
   onFileSelectionChanged(event: MatSelectChange) {
-    // Drop selection carried over from the previously loaded file.
+    // Drop any selection carried over from the previously loaded file — the
+    // SelectionModel holds references to the old file's row objects, which are
+    // no longer relevant and would otherwise keep the exercises acting on
+    // stale rows.
     this.selection.clear();
+    this.pendingContentRatings.clear();
 
     if (!event.value) {
+      this.fileLoadToken++;
       this.dataSource.data = [];
       this.studyContentId = 0;
-      this.contentRatingMap.clear();
+      this.contentRatingMap.set(new Map());
       return;
     }
 
     const selectedContent = event.value as LearningContent;
     this.studyContentId = selectedContent.id;
+    const token = ++this.fileLoadToken;
+    // Clear the rating map BEFORE subscribing to content: cached content
+    // resolves synchronously, so the content `next` (which re-runs the
+    // filter predicate) would otherwise filter the new file's rows against
+    // the previous file's ratings.
+    this.contentRatingMap.set(new Map());
 
     this.contentService
       .getChineseFileContent(selectedContent.fileUrl)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
-      next: (df?: LearnChineseFileItem[]) => {
-        if (df) {
-          this.dataSource.data = df.slice();
-          this.dataSource.paginator = this.paginator;
-          this.dataSource.sort = this.sort!;
-        }
-      },
-      error: err => {
-        console.error(err);
-      },
-    });
+        next: (df?: LearnChineseFileItem[]) => {
+          // A newer selection superseded this load.
+          if (token !== this.fileLoadToken) {
+            return;
+          }
+          if (df) {
+            this.dataSource.data = df.slice();
+          }
+        },
+        error: err => {
+          console.error(err);
+          // A newer selection superseded this load; its error is stale.
+          if (token !== this.fileLoadToken) {
+            return;
+          }
+          // The new file failed to load: drop the previous file's rows so they
+          // are not shown (and rated) under the new file's studyContentId,
+          // which would persist ratings into the wrong file. Bump the token so
+          // the in-flight ratings load for this file is discarded too.
+          this.fileLoadToken++;
+          this.dataSource.data = [];
+          this.studyContentId = 0;
+          this.contentRatingMap.set(new Map());
+          this.pendingContentRatings.clear();
+        },
+      });
 
     // Fetch ratings for this content from the API
-    this.contentRatingMap.clear();
     if (this.studyContentId > 0) {
       this.ratingService
         .getRatings(this.studyContentId)
         .pipe(takeUntilDestroyed(this.destroyRef))
         .subscribe({
           next: (ratings) => {
+            if (token !== this.fileLoadToken) {
+              return;
+            }
+            const newRatingMap = new Map<number, number>();
             for (const r of ratings) {
               if (r.itemId !== undefined) {
-                this.contentRatingMap.set(r.itemId, r.rating);
+                newRatingMap.set(r.itemId, r.rating);
               }
             }
-            // OnPush: ratings arrive async; the mat-table only re-renders rows
-            // when dataSource emits, so without markForCheck the rating column
-            // stays at 0 until the next interaction.
-            this.cdr.markForCheck();
+            this.contentRatingMap.set(newRatingMap);
+            // The predicate closes over contentRatingMap, and the data was
+            // (re)filtered while the map was still empty — force a re-run now
+            // that real ratings are in, or a persisted rating filter shows
+            // stale rows (same trick as onContentRatingChanged).
+            if (this.dataSource.filter) {
+              this.dataSource.filter = this.dataSource.filter;
+            }
+          },
+          error: err => {
+            console.error('Failed to load ratings', err);
+            // Re-evaluate the rows against the (empty) rating map instead of
+            // leaving them filtered by the previous file's ratings until the
+            // next change — mirrors the success path.
+            if (token !== this.fileLoadToken) {
+              return;
+            }
+            if (this.dataSource.filter) {
+              this.dataSource.filter = this.dataSource.filter;
+            }
           },
-          error: err => console.error('Failed to load ratings', err),
         });
     }
   }
 
-  getRating(itemId: number | undefined): number {
-    if (itemId === undefined) {
-      return 0;
-    }
-    return this.contentRatingMap.get(itemId) ?? 0;
+  // ── Selection ───────────────────────────────────────────────────
+
+  /**
+   * Rows the table currently shows: filteredData when a filter is active.
+   * Exercise queues and selection strategies consume this so the table
+   * filter always describes what the exercises will use.
+   */
+  private getVisibleData(): LearnChineseFileItem[] {
+    return this.dataSource.filter ? this.dataSource.filteredData : this.dataSource.data.slice();
   }
 
-  onContentRatingChanged(item: LearnChineseFileItem, event: MatButtonToggleChange) {
-    if (event.value === undefined || event.value === null || event.value < 1) {
-      // Clicking the active toggle deselects it (value becomes undefined).
-      // There is no "clear rating" operation, so restore the previous selection.
-      event.source.buttonToggleGroup.value = event.source.value;
-      return;
-    }
-    if (this.studyContentId <= 0 || item.id === undefined) {
-      return;
-    }
+  /**
+   * Clear the table selection from the Selection menu. Drops every selected
+   * row so the exercises no longer act on a stale selection.
+   */
+  onClearSelection(): void {
+    this.selection.clear();
+  }
 
-    this.ratingService
-      .upsertRating(this.studyContentId, item.id, event.value)
+  /**
+   * Select every row the table currently shows (Selection ▾ > Select All
+   * Visible). Replaces any previous selection so hidden rows never leak into
+   * the exercises.
+   */
+  onSelectAllVisible(): void {
+    this.selection.setSelection(...this.getVisibleData());
+  }
+
+  /**
+   * Quick selection from the filter bar. Random reuses Free Selection (count
+   * on a shuffled source), Sequence reuses By Count (count + offset on the
+   * sorted source); both open the shared select dialog.
+   */
+  onQuickSelect(mode: 'random' | 'sequence'): void {
+    this.onSelect(mode === 'random' ? SelectionModeEnum.FreeSelection : SelectionModeEnum.ByCount);
+  }
+
+  private onSelect(mode: SelectionModeEnum) {
+    const dialogRef = this.dialog.open(ChineseExercisesSelectDialogComponent, {
+      // rowCount bounds By Count's offset. A snapshot of the visible (filtered)
+      // rows, so the dialog's validation matches what selection will act on.
+      data: {
+        mode,
+        rowCount: this.visibleRowCount,
+      },
+      width: '400px',
+      enterAnimationDuration: 800,
+      exitAnimationDuration: 500,
+    });
+
+    dialogRef
+      .afterClosed()
       .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: (saved) => {
-          this.contentRatingMap.set(item.id!, saved.rating);
-          this.cdr.markForCheck();
-        },
-        error: err => console.error('Failed to save rating', err),
+      .subscribe(result => {
+        if (result !== undefined) {
+          this.applySelectionOption(result);
+        }
       });
   }
 
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSource.filter = filterValue.trim().toLowerCase();
+  /**
+   * Apply a VocabularySelectOption produced by the select dialog. Each mode
+   * maps to its selection strategy; Free Selection is By Count on a shuffled
+   * source with offset 0.
+   */
+  private applySelectionOption(option: VocabularySelectOption): void {
+    switch (option.selectedSelectMode) {
+      case SelectionModeEnum.ByCount: {
+        const count = option.countOfItems ?? 0;
+        if (count > 0) {
+          this.applyCountSelection(this.getSortedData(), option.countOfOffset ?? 0, count);
+        }
+        break;
+      }
+      case SelectionModeEnum.FreeSelection: {
+        const count = option.countOfItems ?? 0;
+        if (count > 0) {
+          this.applyCountSelection(FisherYatesShuffle(this.getVisibleData()), 0, count);
+        }
+        break;
+      }
+      case SelectionModeEnum.ByID:
+        // The Chinese select dialog never offers by-word selection.
+        break;
+    }
+  }
+
+  /**
+   * Select `count` items from `source` starting at `offset` (window [offset, offset+count)).
+   * Backs both By Count (sorted source) and Free Selection (shuffled source, offset 0) -
+   * the two modes differ only in the source array and whether offset is exposed.
+   */
+  private applyCountSelection(
+    source: LearnChineseFileItem[],
+    offset: number,
+    count: number
+  ): void {
+    this.selection.clear();
+    source.forEach((item, index) => {
+      if (index >= offset && index < offset + count) {
+        this.selection.select(item);
+      }
+    });
+  }
+
+  /** Returns the visible (filtered) rows in the current sort order (mirrors MatSort behavior). */
+  private getSortedData(): LearnChineseFileItem[] {
+    // The MatSort instance lives in the list child, which wires it onto this
+    // shared data source. Selection strategies consume the same rows the
+    // table shows, so start from the filtered set.
+    const source = this.getVisibleData();
+    const sort = this.dataSource.sort;
+    if (!sort || !sort.active || sort.direction === '') {
+      return source;
+    }
+
+    const sorted = source.slice();
+    sorted.sort((a, b) => {
+      const valueA = this.dataSource.sortingDataAccessor(a, sort.active);
+      const valueB = this.dataSource.sortingDataAccessor(b, sort.active);
+
+      let result = 0;
+      if (typeof valueA === 'string' && typeof valueB === 'string') {
+        result = valueA.localeCompare(valueB);
+      } else {
+        result = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      }
+
+      return sort.direction === 'asc' ? result : -result;
+    });
+
+    return sorted;
+  }
+
+  // ── Exercises ───────────────────────────────────────────────────
+
+  private getDefaultFormTitle(): string {
+    return 'Chinese Exercises';
   }
 
   onStartWithOptions() {
@@ -337,9 +549,9 @@ export class ChineseExercisesComponent implements OnInit {
         reciteContentCount:
           this.selection.selected.length > 0
             ? this.selection.selected.length
-            : this.dataSource.data.length,
+            : this.visibleRowCount,
         disableCount: this.selection.selected.length > 0 ? true : false,
-        translationDisabled: this.selectedFile?.translationDisabled,
+        translationDisabled: this.selectedFile()?.translationDisabled,
       },
       width: '500px',
       height: '360px',
@@ -351,14 +563,14 @@ export class ChineseExercisesComponent implements OnInit {
       .afterClosed()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(result => {
-      if (result !== undefined) {
-        this.setting.selectedLevel = result.selectedLevel;
-        this.setting.allowEmptyAnswer = result.allowEmptyAnswer;
-        this.setting.countOfItems = result.countOfItems;
+        if (result !== undefined) {
+          this.setting.selectedLevel = result.selectedLevel;
+          this.setting.allowEmptyAnswer = result.allowEmptyAnswer;
+          this.setting.countOfItems = result.countOfItems;
 
-        this.onStart();
-      }
-    });
+          this.onStart();
+        }
+      });
   }
 
   onStart() {}
@@ -369,9 +581,9 @@ export class ChineseExercisesComponent implements OnInit {
         reciteContentCount:
           this.selection.selected.length > 0
             ? this.selection.selected.length
-            : this.dataSource.data.length,
+            : this.visibleRowCount,
         disableCount: this.selection.selected.length > 0 ? true : false,
-        translationDisabled: this.selectedFile?.translationDisabled,
+        translationDisabled: this.selectedFile()?.translationDisabled,
       },
       width: '600px',
       height: '560px',
@@ -383,41 +595,42 @@ export class ChineseExercisesComponent implements OnInit {
       .afterClosed()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(result => {
-      if (result !== undefined) {
-        this.printSetting.selectedLevel = result.selectedLevel;
-        this.printSetting.countOfItems = result.countOfItems;
-        this.printSetting.printEntryDate = result.printEntryDate;
-        this.printSetting.answerLineBreakPerItem = result.answerLineBreakPerItem;
-        this.printSetting.respectRetentionCurve = result.respectRetentionCurve;
-        this.printSetting.printExecDate = result.printExecDate;
-        this.printSetting.execDate = result.execDate;
-
-        this.onPrint();
-      }
-    });
+        if (result !== undefined) {
+          this.printSetting.selectedLevel = result.selectedLevel;
+          this.printSetting.countOfItems = result.countOfItems;
+          this.printSetting.printEntryDate = result.printEntryDate;
+          this.printSetting.answerLineBreakPerItem = result.answerLineBreakPerItem;
+          this.printSetting.respectRetentionCurve = result.respectRetentionCurve;
+          this.printSetting.printExecDate = result.printExecDate;
+          this.printSetting.execDate = result.execDate;
+
+          this.onPrint();
+        }
+      });
   }
 
   onPrint() {
+    const file = this.selectedFile();
     // Check whether there are selections
     const numSelected = this.selection.selected.length > 0 ? this.selection.selected.length : 0;
     let printqueues: KnowledgeExerciseFileContent[] = [];
     if (numSelected > 0) {
       printqueues = convertChineseReciteItemToKnowledge(
         this.selection.selected,
-        this.selectedFile?.version,
+        file?.version,
         this.printSetting.selectedLevel
       );
-      printqueues = fisherYatesShuffle(printqueues);
+      printqueues = FisherYatesShuffle(printqueues);
     } else {
       printqueues = convertChineseReciteItemToKnowledge(
-        this.dataSource.data,
-        this.selectedFile?.version,
+        this.getVisibleData(),
+        file?.version,
         this.printSetting.selectedLevel
       );
 
       if (printqueues.length > this.printSetting.countOfItems) {
         // Randomize the array
-        printqueues = fisherYatesShuffle(printqueues);
+        printqueues = FisherYatesShuffle(printqueues);
         // Keep only required items
         printqueues = printqueues.slice(0, this.printSetting.countOfItems);
       }
@@ -429,7 +642,7 @@ export class ChineseExercisesComponent implements OnInit {
 
     // Prepare the printing
     const execPrintSetting: KnowledgeExercisePrintOption = {
-      formTitle: this.selectedFile?.nameChinese ? `${this.selectedFile.nameChinese}` : this.getDefaultFormTitle(),
+      formTitle: file?.nameChinese ? file.nameChinese : this.getDefaultFormTitle(),
       printEntryDate: true,
       printScore: true,
       printAnswer: true,
@@ -442,193 +655,4 @@ export class ChineseExercisesComponent implements OnInit {
     this.uiService.setSelectedExerciseItem(printqueues, execPrintSetting);
     void this.router.navigate(['/knowledge/displayv2']);
   }
-
-  onSelectByRating() {
-    const dialogRef = this.dialog.open(ChineseSelectByRatingDialogComponent, {
-      data: {},
-      width: '400px',
-      enterAnimationDuration: 800,
-      exitAnimationDuration: 500,
-    });
-
-    dialogRef
-      .afterClosed()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(result => {
-        if (result !== undefined) {
-          this.selection.clear();
-          const operator = result.ratingOperator as RatingOperatorEnum;
-          const value = result.ratingValue as number;
-
-          this.dataSource.data.forEach(item => {
-            const rating = this.getRating(item.id);
-            const matches = matchRating(rating, operator, value);
-
-            if (matches) {
-              this.selection.select(item);
-            }
-          });
-          this.cdr.markForCheck();
-        }
-      });
-  }
-}
-
-@Component({
-  selector: 'app-chinese-exercises-options-dlg',
-  templateUrl: 'chinese-exercises-options-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    FormsModule,
-    MatInputModule,
-    MatCheckboxModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatSelectModule,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ChineseExercisesOptionsDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<ChineseExercisesOptionsDialogComponent>);
-  readonly selectedLevel = model(QuestionBankItemLevelEnum.Medium);
-  readonly allowEmptyAnswer = model(false);
-  readonly countOfItems = model(this.data.disableCount ? this.data.reciteContentCount : 20);
-  readonly allLevels = getAllQuestionBankLevelEnumValues();
-  getQuestionBankLevelName = getQuestionBankLevelName;
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA)
-    public data: { reciteContentCount: number; disableCount: boolean; translationDisabled: boolean }
-  ) {}
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-  onYesClick(): void {
-    const selvl = this.selectedLevel();
-
-    const closedata: ChineseReciteOption = {
-      selectedLevel: selvl,
-      countOfItems: this.countOfItems(),
-      allowEmptyAnswer: this.allowEmptyAnswer(),
-    };
-
-    this.dialogRef.close(closedata);
-  }
-}
-
-@Component({
-  selector: 'app-chinese-exercises-printoptions-dlg',
-  templateUrl: 'chinese-exercises-printoptions-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatCheckboxModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatSelectModule,
-    MatRadioModule,
-    MatDatepickerModule,
-    MatDateFnsModule,
-    TranslocoModule,
-  ],
-  providers: [
-    provideDateFnsAdapter(),
-    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
-    { provide: MAT_DATE_LOCALE, useValue: zhCN },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ChineseExercisesPrintOptionsDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<ChineseExercisesPrintOptionsDialogComponent>);
-
-  readonly selectedLevel = model(QuestionBankItemLevelEnum.Medium);
-  readonly countOfItems = model(this.data.disableCount ? this.data.reciteContentCount : 20);
-  readonly printEntryDate = model(true);
-  readonly answerLineBreak = model(true);
-  readonly selectedExecDateModel = model<number>(0);
-  readonly execDate = model(new Date());
-
-  readonly allPrintExecDates = getAllPrintExecDateString();
-  readonly allLevels = getAllQuestionBankLevelEnumValues();
-  getQuestionBankLevelName = getQuestionBankLevelName;
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA)
-    public data: { reciteContentCount: number; disableCount: boolean; translationDisabled: boolean }
-  ) {}
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-  onYesClick(): void {
-    const selvl = this.selectedLevel();
-
-    const closedata: ChineseRecitePrintOption = {
-      selectedLevel: selvl,
-      countOfItems: this.countOfItems(),
-      printEntryDate: this.printEntryDate(),
-      answerLineBreakPerItem: this.answerLineBreak(),
-      respectRetentionCurve: this.selectedExecDateModel() === 1 ? true : false,
-      printExecDate: this.selectedExecDateModel() === 2 ? true : false,
-      execDate: this.selectedExecDateModel() === 2 ? this.execDate() : undefined,
-    };
-
-    this.dialogRef.close(closedata);
-  }
-}
-
-@Component({
-  selector: 'app-chinese-selectbyrating-dlg',
-  templateUrl: 'chinese-exercises-selectbyrating-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    FormsModule,
-    MatInputModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatSelectModule,
-    TranslocoModule,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ChineseSelectByRatingDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<ChineseSelectByRatingDialogComponent>);
-  readonly ratingOperator = model(RatingOperatorEnum.Equals);
-  readonly ratingValue = model(3);
-
-  get ratingOperators(): { value: RatingOperatorEnum; label: string }[] {
-    return [
-      { value: RatingOperatorEnum.Equals, label: 'operatorEquals' },
-      { value: RatingOperatorEnum.GreaterThan, label: 'operatorGreaterThan' },
-      { value: RatingOperatorEnum.LargerOrEquals, label: 'operatorLargerOrEquals' },
-      { value: RatingOperatorEnum.LessThan, label: 'operatorLessThan' },
-      { value: RatingOperatorEnum.LessOrEquals, label: 'operatorLessOrEquals' },
-    ];
-  }
-
-  get ratingValues(): number[] {
-    return [1, 2, 3, 4, 5];
-  }
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-  onYesClick(): void {
-    this.dialogRef.close({
-      ratingOperator: this.ratingOperator(),
-      ratingValue: this.ratingValue(),
-    });
-  }
 }
diff --git a/src/app/pages/english-listening/english-listening.component.html b/src/app/pages/english-listening/english-listening.component.html
index a2b2781..2f33b3f 100644
--- a/src/app/pages/english-listening/english-listening.component.html
+++ b/src/app/pages/english-listening/english-listening.component.html
@@ -4,7 +4,7 @@
     <mat-toolbar class="container">
       <mat-toolbar-row>
         <span>
-          <h5>{{ t('englishListening.pageTitle') }}</h5>
+          <h5>{{ t('listening') }}</h5>
         </span>
         <span class="toolbar-spacer"></span>
         <mat-form-field class="page-toolbar-item">
@@ -28,7 +28,7 @@ <h5>{{ t('englishListening.pageTitle') }}</h5>
       <table mat-table [dataSource]="dataSourceLesson" class="mat-elevation-z8 w-full">
         <!-- Title Column -->
         <ng-container matColumnDef="title">
-          <th mat-header-cell *matHeaderCellDef> {{ t('englishListening.columnTitle') }} </th>
+          <th mat-header-cell *matHeaderCellDef> {{ t('common.title') }} </th>
           <td mat-cell *matCellDef="let element"> {{element.title}} </td>
         </ng-container>
 
@@ -93,7 +93,7 @@ <h5>{{selectedLesson?.title}}</h5>
 
         <!-- Vocabulary column -->
         <ng-container matColumnDef="vocabulary">
-          <th mat-header-cell *matHeaderCellDef> {{ t('englishListening.vocabularyColumn') }} </th>
+          <th mat-header-cell *matHeaderCellDef> {{ t('vocabulary') }} </th>
           <td mat-cell *matCellDef="let element">
             @if(element.vocabulary && element.vocabulary.length > 0) {
             <button mat-button (click)="displayVocabulary(element)">{{ t('englishListening.displayVocabulary')
@@ -133,7 +133,7 @@ <h5>{{selectedSection?.title}}</h5>
       <table mat-table [dataSource]="dataSourceSectionContent" class="mat-elevation-z8 w-full">
         <!-- Title Column -->
         <ng-container matColumnDef="title">
-          <th mat-header-cell *matHeaderCellDef> {{ t('englishListening.columnTitle') }} </th>
+          <th mat-header-cell *matHeaderCellDef> {{ t('common.title') }} </th>
           <td mat-cell *matCellDef="let element"> {{element.title}} </td>
         </ng-container>
 
@@ -141,7 +141,7 @@ <h5>{{selectedSection?.title}}</h5>
         <ng-container matColumnDef="item">
           <th mat-header-cell *matHeaderCellDef> {{ t('englishListening.itemCollection') }} </th>
           <td mat-cell *matCellDef="let element">
-            <button mat-button (click)="startExercise(element)">{{ t('englishListening.startExercise') }}</button>
+            <button mat-button (click)="startExercise(element)">{{ t('common.start') }}</button>
           </td>
         </ng-container>
 
@@ -267,7 +267,7 @@ <h5>{{selectedLesson?.title}}</h5>
 
     <div class="container">
       <div class="mat-elevation-z8">
-        <h3>{{ t('englishListening.vocabularyColumn') }}：</h3>
+        <h3>{{ t('vocabulary') }}：</h3>
         @for(vocab of selectedSection?.vocabulary ?? []; track $index) {
         <app-markdown-content [markdown]="vocab" [enableMath]="false"></app-markdown-content>
         }
diff --git a/src/app/pages/formula-recites/formula-recites-printoptions-dialog.html b/src/app/pages/formula-recites/formula-recites-printoptions-dialog.html
index 7c49214..ef9c863 100644
--- a/src/app/pages/formula-recites/formula-recites-printoptions-dialog.html
+++ b/src/app/pages/formula-recites/formula-recites-printoptions-dialog.html
@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>{{ t('optionsOfPrinting') }}</h2>
   <mat-dialog-content>
     <mat-form-field class="control-full-width">
-      <mat-label>{{ t('formulaRecites.subTitle') }}</mat-label>
+      <mat-label>{{ t('common.subTitle') }}</mat-label>
       <input matInput type="name" [(ngModel)]="subtitle">
       <span matTextPrefix>{{data.filename}}</span>
     </mat-form-field>
@@ -13,7 +13,7 @@ <h2 mat-dialog-title>{{ t('optionsOfPrinting') }}</h2>
     </mat-form-field>
     <mat-checkbox class="control-full-width" [(ngModel)]="printEntryDate">{{ t('printEntryDate') }}</mat-checkbox>
     <div class="control-full-width">
-      <mat-label>{{ t('formulaRecites.execDateOption') }}</mat-label>
+      <mat-label>{{ t('common.execDateOption') }}</mat-label>
       <mat-radio-group aria-label="Select an option" class="control-full-width" [(ngModel)]="selectedExecDateModel">
         @for (lvl of allPrintExecDates; track $index) {
           <mat-radio-button [value]="lvl.value">{{lvl.label}}</mat-radio-button>
diff --git a/src/app/pages/formula-recites/formula-recites.component.html b/src/app/pages/formula-recites/formula-recites.component.html
index adba2a8..98a3cb2 100644
--- a/src/app/pages/formula-recites/formula-recites.component.html
+++ b/src/app/pages/formula-recites/formula-recites.component.html
@@ -3,7 +3,7 @@
     <mat-toolbar class="container">
       <mat-toolbar-row>
         <span>
-          <h5>{{ t('formulaRecites.title') }}</h5>
+          <h5>{{ t('formula') }}</h5>
         </span>
         <span class="toolbar-spacer"></span>
         <mat-form-field class="page-toolbar-item">
diff --git a/src/app/pages/formula-recites/formula-recites.component.ts b/src/app/pages/formula-recites/formula-recites.component.ts
index 897495a..5c1f2b7 100644
--- a/src/app/pages/formula-recites/formula-recites.component.ts
+++ b/src/app/pages/formula-recites/formula-recites.component.ts
@@ -42,6 +42,7 @@ import { DomSanitizer } from '@angular/platform-browser';
 import type { SafeHtml } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import { FisherYatesShuffle } from 'actslib';
 import { zhCN } from 'date-fns/locale';
 
 import type {
@@ -66,7 +67,6 @@ import {
 } from '../../services';
 import { FooterComponent } from '../../shared/footer/footer';
 import { MathItemComponent } from '../../shared/mathitem';
-import { fisherYatesShuffle } from '../../shared/utils/shuffle';
 import { AppPageTitle } from '../page-title/page-title';
 
 @Component({
@@ -287,13 +287,13 @@ export class FormulaRecitesComponent implements OnInit {
     if (this.selection.selected.length > 0) {
       this.printqueues = this.selection.selected;
       if (this.printSetting.randomOrder) {
-        this.printqueues = fisherYatesShuffle(this.printqueues);
+        this.printqueues = FisherYatesShuffle(this.printqueues);
       }
     } else {
       this.printqueues = this.dataSource.data.slice();
 
       if (this.printSetting.randomOrder) {
-        this.printqueues = fisherYatesShuffle(this.printqueues);
+        this.printqueues = FisherYatesShuffle(this.printqueues);
       }
 
       if (this.printqueues.length > this.printSetting.countOfItems) {
diff --git a/src/app/pages/knowledge-exercises/_knowledge-exercises-theme.scss b/src/app/pages/knowledge-exercises/_knowledge-exercises-theme.scss
index ce2b8ba..e537709 100644
--- a/src/app/pages/knowledge-exercises/_knowledge-exercises-theme.scss
+++ b/src/app/pages/knowledge-exercises/_knowledge-exercises-theme.scss
@@ -4,9 +4,6 @@
   .knowledge-exercises-page {
     color: mat.get-theme-color($theme, on-surface-variant);
   }
-  .knowledge-exercise-list-page {
-    color: mat.get-theme-color($theme, on-surface-variant);
-  }
   .knowledge-exercises-detail-page {
     color: mat.get-theme-color($theme, on-surface-variant);
     // Add background color for the detail container to ensure contrast
@@ -26,8 +23,9 @@
     color: mat.get-theme-color($theme, on-surface-variant);
   }
 
-  // Specific styling for the markdown content area in detail views
-  .knowledge-exercise-list-page .container {
+  // Background for the toolbar/table containers of the list view (and the
+  // markdown containers of the detail views) to ensure contrast.
+  .knowledge-exercises-page .container {
     background: mat.get-theme-color($theme, surface);
   }
 }
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/index.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/index.ts
index c433874..65e0fb4 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/index.ts
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/index.ts
@@ -1 +1,4 @@
+export * from './knowledge-exercises.component';
 export * from './knowledge-exercises-list.component';
+export * from './knowledge-exercises-select-dialog.component';
+export * from './knowledge-exercises-printoptions-dialog.component';
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.html b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.html
index 8cb0ba3..f6a8b8f 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.html
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.html
@@ -1,239 +1,172 @@
-<main focusOnNavigation aria-label="Knowledge Bank List" class="knowledge-exercise-list-page" *transloco="let t">
-  <div class="knowledge-exercise-list-page-content">
-    @if (contentToDisplay === ContentToDisplay.List) {
-    <mat-toolbar class="container">
-      <mat-toolbar-row>
-        <span>
-          <h5>{{ t('knowledgeExercises.title') }}</h5>
-        </span>
-        <span class="toolbar-spacer"></span>
-        <mat-form-field class="toolbar-item">
-          <mat-label>{{ t('files') }}</mat-label>
-          <mat-select matNativeControl [(value)]="selectedFile" (selectionChange)="onFileSelectionChanged($event)"
-            [disabled]="isLoadingContents" [placeholder]="isLoadingContents ? t('loading') : t('files')">
-            @if (isLoadingContents) {
-              <mat-option disabled>
-                <mat-spinner diameter="18"></mat-spinner>
-                {{ t('loading') }}
-              </mat-option>
-            }
-            <mat-option value="">{{ t('none') }}</mat-option>
-            @for (file of allFiles; track file.id ) {
+<ng-container *transloco="let t">
+  <mat-toolbar class="container">
+    <mat-toolbar-row>
+      <span>
+        <h5>{{ t('knowledge_bank') }}</h5>
+      </span>
+      <span class="toolbar-spacer"></span>
+      <mat-form-field class="page-toolbar-item">
+        <mat-label>{{ t('files') }}</mat-label>
+        <mat-select matNativeControl [(value)]="selectedFile" (selectionChange)="fileSelectionChanged.emit($event)"
+          [disabled]="isLoadingContents()" [placeholder]="isLoadingContents() ? t('loading') : t('files')">
+          @if (isLoadingContents()) {
+            <mat-option disabled>
+              <mat-spinner diameter="18"></mat-spinner>
+              {{ t('loading') }}
+            </mat-option>
+          }
+          <mat-option value="">{{ t('none') }}</mat-option>
+          @for (file of allFiles(); track file.id ) {
             <mat-option [value]="file">{{file.nameChinese}}</mat-option>
-            }
-          </mat-select>
+          }
+        </mat-select>
+      </mat-form-field>
+    </mat-toolbar-row>
+  </mat-toolbar>
+
+  <div class="container">
+    <div class="filter-row">
+      <div class="filter-bar">
+        <mat-form-field class="filter-bar-free-text" subscriptSizing="dynamic">
+          <mat-label>{{ t('filter') }}</mat-label>
+          <input matInput [(ngModel)]="freeText"
+            (input)="onFreeTextChanged($any($event.target).value)"
+            (compositionstart)="onCompositionStart()"
+            (compositionend)="onCompositionEnd($any($event.target).value)"
+            [disabled]="!selectedFile()" />
         </mat-form-field>
-        <span class="toolbar-item-count" matSuffix><small>{{ t('items') }}: {{itemCount}}</small></span>
-        <section style="padding-left: 8px;">
-          <div class="example-button-container">
-            <button mat-fab [matMenuTriggerFor]="selectMenu" [matTooltip]="t('select')"
-              [disabled]="!selectedFile">
-              <mat-icon>query_builder</mat-icon>
-            </button>
-          </div>
-        </section>
-        <mat-menu #selectMenu="matMenu">
-          <button mat-menu-item (click)="onSelectByCount()">{{ t('knowledgeExercises.selectByCount') }}</button>
-          <button mat-menu-item (click)="onSelectByID()">{{ t('knowledgeExercises.selectByID') }}</button>
-          <button mat-menu-item (click)="onSelectFreeSelection()">{{ t('knowledgeExercises.selectFree') }}</button>
-          <button mat-menu-item (click)="onSelectByRating()">{{ t('selectByRating') }}</button>
-        </mat-menu>
-        <section style="padding-left: 8px;">
-          <div class="example-button-container">
-            <button mat-fab [matTooltip]="t('print')" (click)="onPreview()"
-              [disabled]="selection.isEmpty()">
-              <mat-icon>print</mat-icon>
-            </button>
-          </div>
-        </section>
-      </mat-toolbar-row>
-    </mat-toolbar>
 
-    <div class="container">
-      <mat-form-field class="w-full">
-        <mat-label>{{ t('filter') }}</mat-label>
-        <input matInput (keyup)="applyFilter($event)" #input>
-      </mat-form-field>
+        <button mat-stroked-button [matMenuTriggerFor]="filterMenu" [disabled]="!selectedFile()">{{ t('filter') }} ▾</button>
+        <mat-menu #filterMenu="matMenu">
+          <button mat-menu-item (click)="defineFilter.emit()">{{ filterMenuLabel }}</button>
+          <button mat-menu-item (click)="clearFilter.emit()" [disabled]="!hasFilter">{{ t('common.filterClear') }}</button>
+        </mat-menu>
+      </div>
 
-      <table mat-table [dataSource]="dataSource" class="mat-elevation-z8 w-full">
-        <!-- Checkbox Column -->
-        <ng-container matColumnDef="select">
-          <th mat-header-cell *matHeaderCellDef>
-            <mat-checkbox (change)="$event ? toggleAllRows() : null" [checked]="selection.hasValue() && isAllSelected()"
-              [indeterminate]="selection.hasValue() && !isAllSelected()">
-            </mat-checkbox>
-          </th>
-          <td mat-cell *matCellDef="let row">
-            <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection.toggle(row) : null"
-              [checked]="selection.isSelected(row)">
-            </mat-checkbox>
-          </td>
-          <td mat-footer-cell *matFooterCellDef></td>
-        </ng-container>
+      <div class="filter-bar-actions">
+        <button mat-stroked-button [matMenuTriggerFor]="quickMenu" [disabled]="!selectedFile()">{{ t('common.quickSelection') }} ▾</button>
+        <mat-menu #quickMenu="matMenu">
+          <button mat-menu-item (click)="quickSelect.emit('random')">
+            <mat-icon>shuffle</mat-icon>
+            <span>{{ t('common.randomSelect') }}</span>
+          </button>
+          <button mat-menu-item (click)="quickSelect.emit('sequence')">
+            <mat-icon>format_list_numbered</mat-icon>
+            <span>{{ t('common.sequenceSelect') }}</span>
+          </button>
+          <button mat-menu-item (click)="quickSelect.emit('ids')">
+            <mat-icon>numbers</mat-icon>
+            <span>{{ t('knowledgeExercises.selectIds') }}</span>
+          </button>
+          <mat-divider></mat-divider>
+          <button mat-menu-item (click)="selectAllVisible.emit()" [disabled]="visibleRowCount === 0">
+            <mat-icon>select_all</mat-icon>
+            <span>{{ t('common.selectAllVisible') }}</span>
+          </button>
+          <button mat-menu-item (click)="clearSelection.emit()" [disabled]="selection().isEmpty()">
+            <mat-icon>deselect</mat-icon>
+            <span>{{ t('common.clearSelection') }}</span>
+          </button>
+        </mat-menu>
 
-        <!-- ID Column -->
-        <ng-container matColumnDef="id">
-          <th mat-header-cell *matHeaderCellDef> {{ t('id') }} </th>
-          <td mat-cell *matCellDef="let element">
-            <button mat-button (click)="onShowDetail(element.id)">{{element.id}}</button>
-          </td>
-          <td mat-footer-cell *matFooterCellDef></td>
-        </ng-container>
+        <button mat-stroked-button [matMenuTriggerFor]="exerciseMenu" [disabled]="!selectedFile()">{{ t('common.exercises') }} ▾</button>
+        <mat-menu #exerciseMenu="matMenu">
+          <button mat-menu-item (click)="print.emit()" [disabled]="selection().isEmpty()">
+            <mat-icon>print</mat-icon>
+            <span>{{ t('print') }}</span>
+          </button>
+        </mat-menu>
+        <mat-divider [vertical]="true"></mat-divider>
 
-        <!-- Item type -->
-        <ng-container matColumnDef="itemtype">
-          <th mat-header-cell *matHeaderCellDef> {{ t('knowledgeExercises.type') }} </th>
-          <td mat-cell *matCellDef="let element"> {{element.itemTypeString}} </td>
-          <td mat-footer-cell *matFooterCellDef></td>
-        </ng-container>
+        <!-- Counts: total items in the file | rows after filtering | selected rows -->
+        <div class="filter-bar-counts">
+          <span [matTooltip]="t('items')">{{ wordQueueCount }}</span>
+          <mat-divider [vertical]="true"></mat-divider>
+          <span [matTooltip]="t('common.filteredItems')">{{ visibleRowCount }}</span>
+          <mat-divider [vertical]="true"></mat-divider>
+          <span [matTooltip]="t('totalSelections')">{{ selectionCount() }}</span>
+        </div>
+      </div>
+    </div>
 
-        <!-- Tags -->
-        <ng-container matColumnDef="tags">
-          <th mat-header-cell *matHeaderCellDef> {{ t('knowledgeExercises.tags') }} </th>
-          <td mat-cell *matCellDef="let element"> {{element.tags ? element.tags.join(', ') : ''}} </td>
-          <td mat-footer-cell *matFooterCellDef> {{ t('totalRecords') }}: {{itemCount}} </td>
-        </ng-container>
+    <table mat-table [dataSource]="dataSource()" matSort class="mat-elevation-z8 w-full">
+      <!-- Checkbox Column -->
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox (change)="$event ? allRowsToggled.emit() : null" [checked]="selection().hasValue() && isAllSelected()"
+            [indeterminate]="selection().hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-checkbox (click)="$event.stopPropagation()" (change)="$event ? selection().toggle(row) : null"
+            [checked]="selection().isSelected(row)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
 
-        <!-- Difficulty -->
-        <ng-container matColumnDef="difficulty">
-          <th mat-header-cell *matHeaderCellDef> {{ t('knowledgeExercises.difficulty') }} </th>
-          <td mat-cell *matCellDef="let element"> {{element.difficulty}} </td>
-          <td mat-footer-cell *matFooterCellDef></td>
-        </ng-container>
+      <!-- ID Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by ID"> {{ t('id') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <button mat-button (click)="showDetail.emit(element.id)">{{element.id}}</button>
+        </td>
+      </ng-container>
 
-        <!-- Suggested Completion Time -->
-        <ng-container matColumnDef="suggestedCompletionTime">
-          <th mat-header-cell *matHeaderCellDef> {{ t('knowledgeExercises.estTime') }} </th>
-          <td mat-cell *matCellDef="let element"> {{element.suggestedCompletionTime}} </td>
-          <td mat-footer-cell *matFooterCellDef></td>
-        </ng-container>
+      <!-- Item type -->
+      <ng-container matColumnDef="itemtype">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by type"> {{ t('knowledgeExercises.fieldType') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.itemTypeString}} </td>
+      </ng-container>
 
-        <!-- Extra Info -->
-        <ng-container matColumnDef="extraInfo">
-          <th mat-header-cell *matHeaderCellDef> {{ t('knowledgeExercises.extraInfo') }} </th>
-          <td mat-cell *matCellDef="let element">
-            <button mat-mini-fab (click)="onShowExtraInfo(element.id)" [disabled]="!element.extraInfo">
-              <mat-icon>description</mat-icon>
-            </button>
-          </td>
-          <td mat-footer-cell *matFooterCellDef></td>
-        </ng-container>
+      <!-- Difficulty -->
+      <ng-container matColumnDef="difficulty">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by difficulty"> {{ t('knowledgeExercises.difficulty') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.difficulty}} </td>
+      </ng-container>
 
-        <!-- Rating Column -->
-        <ng-container matColumnDef="rating">
-          <th mat-header-cell *matHeaderCellDef> {{ t('rating') }} </th>
-          <td mat-cell *matCellDef="let element">
-            <mat-button-toggle-group [ngModel]="getRating(element.id)" aria-label="Rating"
-              (change)="onContentRatingChanged(element, $event)">
-              <mat-button-toggle [value]="1">1</mat-button-toggle>
-              <mat-button-toggle [value]="2">2</mat-button-toggle>
-              <mat-button-toggle [value]="3">3</mat-button-toggle>
-              <mat-button-toggle [value]="4">4</mat-button-toggle>
-              <mat-button-toggle [value]="5">5</mat-button-toggle>
-            </mat-button-toggle-group>
-          </td>
-          <td mat-footer-cell *matFooterCellDef> {{ t('totalSelections') }}: {{selection.selected.length}} </td>
-        </ng-container>
+      <!-- Suggested Completion Time -->
+      <ng-container matColumnDef="suggestedCompletionTime">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by estimated time"> {{ t('knowledgeExercises.estTime') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.suggestedCompletionTime}} </td>
+      </ng-container>
 
-        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
-        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-        <tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
-      </table>
+      <!-- Tags -->
+      <ng-container matColumnDef="tags">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by tags"> {{ t('knowledgeExercises.tags') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.tags ? element.tags.join(', ') : ''}} </td>
+      </ng-container>
 
-      <mat-paginator [pageSizeOptions]="[20, 50, 100]" showFirstLastButtons aria-label="Select page of items">
-      </mat-paginator>
-    </div>
-    }
-    @else if (contentToDisplay === ContentToDisplay.Detail) {
-    <mat-toolbar class="container">
-      <mat-toolbar-row>
-        <span>
-          <h5>{{ t('knowledgeExercises.title') }} {{ t('knowledgeExercises.detail') }}</h5>
-        </span>
-        <span class="toolbar-spacer"></span>
-        <section style="padding-left: 8px;">
-          <button mat-fab [matTooltip]="t('knowledgeExercises.previous')" (click)="onPreviousItem()"
-            [disabled]="(selectedElementIdx ?? -1) <= 0">
-            <mat-icon color="primary">arrow_left</mat-icon>
-          </button>
-          <span>{{selectedElement?.id}}</span>
-          <button mat-fab [matTooltip]="t('knowledgeExercises.next')" (click)="onNextItem()"
-            [disabled]="(selectedElementIdx ?? 0) >= dataSource.data.length - 1">
-            <mat-icon color="primary">arrow_right</mat-icon>
-          </button>
-        </section>
-        <span class="toolbar-spacer"></span>
-        <section style="padding-left: 8px;">
-          <div class="example-button-container">
-            <button mat-fab extended [matTooltip]="t('toggleAnswer')" (click)="onToggleAnswer()"
-              [disabled]="!selectedElement?.hasAnswer">
-              {{ t('toggleAnswer') }}
-            </button>
-            <button mat-fab extended [matTooltip]="t('knowledgeExercises.toggleHintOfAnswer')"
-              (click)="onToggleHintOfAnswer()" [disabled]="!selectedElement?.hasHintOfAnswer()">
-              {{ t('knowledgeExercises.toggleHintOfAnswer') }}
-            </button>
-            <button mat-fab [matTooltip]="t('backToList')" (click)="onBackToList()">
-              <mat-icon>door_back</mat-icon>
-            </button>
-          </div>
-        </section>
-      </mat-toolbar-row>
-    </mat-toolbar>
-    <div class="container knowledge-exercises-detail-view">
-      <app-markdown-content [markdown]="markdownStr" [enableMath]="false" [imageBaseUrl]="currentImageBaseUrl"></app-markdown-content>
-    </div>
-    @if (showDetailAnswer) {
-    <div class="container knowledge-exercises-detail-view">
-      <mat-divider></mat-divider>
-      {{ t('knowledgeExercises.answer') }}:
-      <br />
-      <app-markdown-content [markdown]="answerMarkdownStr" [enableMath]="false" [imageBaseUrl]="currentImageBaseUrl"></app-markdown-content>
-    </div>
-    }
-    @if (showDetailHintOfAnswer) {
-    <div class="container knowledge-exercises-detail-view">
-      <mat-divider></mat-divider>
-      {{ t('hint') }}:
-      <br />
-      <app-markdown-content [markdown]="hintOfAnswerMarkdownStr" [enableMath]="false" [imageBaseUrl]="currentImageBaseUrl"></app-markdown-content>
-    </div>
-    }
-    }
-    @else if (contentToDisplay === ContentToDisplay.ExtraInfo) {
-    <mat-toolbar class="container">
-      <mat-toolbar-row>
-        <span>
-          <h5>{{ t('knowledgeExercises.title') }} {{ t('knowledgeExercises.extraInfo') }}</h5>
-        </span>
-        <span class="toolbar-spacer"></span>
-        <section style="padding-left: 8px;">
-          <button mat-fab [matTooltip]="t('knowledgeExercises.previous')" (click)="onPreviousItem()"
-            [disabled]="(selectedElementIdx ?? -1) <= 0">
-            <mat-icon color="primary">arrow_left</mat-icon>
-          </button>
-          <span>{{selectedElement?.id}}</span>
-          <button mat-fab [matTooltip]="t('knowledgeExercises.next')" (click)="onNextItem()"
-            [disabled]="(selectedElementIdx ?? 0) >= dataSource.data.length - 1">
-            <mat-icon color="primary">arrow_right</mat-icon>
+      <!-- Extra Info -->
+      <ng-container matColumnDef="extraInfo">
+        <th mat-header-cell *matHeaderCellDef> {{ t('common.extraInfo') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <button mat-icon-button (click)="showExtraInfo.emit(element.id)" [disabled]="!element.extraInfo"
+            [attr.aria-label]="t('common.extraInfo')">
+            <mat-icon>description</mat-icon>
           </button>
-        </section>
-        <span class="toolbar-spacer"></span>
-        <section style="padding-left: 8px;">
-          <div class="example-button-container">
-            <button mat-fab [matTooltip]="t('backToList')" (click)="onBackToList()">
-              <mat-icon>door_back</mat-icon>
-            </button>
-          </div>
-        </section>
-      </mat-toolbar-row>
-    </mat-toolbar>
-<div class="container knowledge-exercises-detail-view">
-      <app-markdown-content [markdown]="getExtraInfoMarkdown()"
-        [enableMath]="false" [imageBaseUrl]="currentImageBaseUrl"></app-markdown-content>
-    </div>
-    }
-  </div>
-</main>
+        </td>
+      </ng-container>
+
+      <!-- Rating Column -->
+      <ng-container matColumnDef="rating">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by rating"> {{ t('rating') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-button-toggle-group [ngModel]="getRating(element.id)" aria-label="Rating"
+            (change)="contentRatingChanged.emit({ item: element, event: $event })">
+            <mat-button-toggle [value]="1">1</mat-button-toggle>
+            <mat-button-toggle [value]="2">2</mat-button-toggle>
+            <mat-button-toggle [value]="3">3</mat-button-toggle>
+            <mat-button-toggle [value]="4">4</mat-button-toggle>
+            <mat-button-toggle [value]="5">5</mat-button-toggle>
+          </mat-button-toggle-group>
+        </td>
+      </ng-container>
 
-<app-footer></app-footer>
\ No newline at end of file
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator [pageSizeOptions]="[20, 50, 100, 200]" showFirstLastButtons
+      aria-label="Select page of items">
+    </mat-paginator>
+  </div>
+</ng-container>
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.scss b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.scss
index 1555fe9..8e6568e 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.scss
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.scss
@@ -1,28 +1,82 @@
-:host,
-.knowledge-exercise-list-page {
-  // Ensures that the footer is pushed to the bottom if the page is too short.
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
+// The host element stands in for the toolbar/table blocks that used to be
+// direct children of the page's flex container; display: contents keeps the
+// original layout semantics (its children become the flex items).
+:host {
+    display: contents;
 }
 
-.knowledge-exercise-list-page-content {
-  display: flex;
-  flex-wrap: wrap;
-  align-content: center;
-  justify-content: center;
+.toolbar-spacer {
+    flex: 1 1 auto;
 }
 
-.toolbar-spacer {
-  flex: 1 1 auto;
+.page-toolbar-item {
+    margin-top: 4px;
+    padding-top: 4px;
+}
+
+// Row above the table: the bordered filter box (free text + Content/Rating
+// filters) on the left, the action menus and counts on the right.
+.filter-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    margin-bottom: 8px;
 }
 
-.control-full-width {
-  width: 100%;
+// Fiori-style bordered box around the actual filters only. The free-text
+// filter grows to fill the box; on narrow screens the box takes a full row
+// and the free text wraps inside it.
+.filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    padding: 8px 12px;
+    border: 1px solid var(--mat-sys-outline-variant, #e0e0e0);
+    border-radius: 4px;
 }
 
-.example-button-container {
-  display: flex;
-  justify-content: center;
-  gap: 12px;
+.filter-bar-free-text {
+    flex: 1 1 auto;
+    min-width: 200px;
+}
+
+// Action menus (Quick Selection, Exercises) and counts, outside the bordered
+// box, pushed to the right edge of the row.
+.filter-bar-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    margin-left: auto;
+
+    mat-divider {
+        height: 24px;
+    }
+}
+
+// Read-only counts at the end of the row: total | filtered | selected.
+.filter-bar-counts {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--mat-sys-on-surface-variant, #666);
+    white-space: nowrap;
+
+    mat-divider {
+        height: 18px;
+    }
+}
+
+@media (max-width: 820px) {
+    .filter-bar {
+        flex: 1 1 100%;
+    }
+
+    .filter-bar-free-text {
+        flex: 1 1 100%;
+    }
 }
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.spec.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.spec.ts
index 9a23fa4..bca1bcc 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.spec.ts
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.spec.ts
@@ -1,1531 +1,252 @@
+import { SelectionModel } from '@angular/cdk/collections';
 import type { ComponentFixture } from '@angular/core/testing';
 import { TestBed } from '@angular/core/testing';
-import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatPaginatorModule } from '@angular/material/paginator';
-import { MatRadioModule } from '@angular/material/radio';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTableModule } from '@angular/material/table';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatDateFnsModule } from '@angular/material-date-fns-adapter';
-import { Title } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { Router } from '@angular/router';
-import { RouterTestingModule } from '@angular/router/testing';
+import { MatTableDataSource } from '@angular/material/table';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import {
-  TranslocoModule,
   TranslocoService,
   TRANSLOCO_TRANSPILER,
   TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
 } from '@jsverse/transloco';
-import { of, throwError } from 'rxjs';
+import { FilterJoinType, FilterOperation, type IFilterDefinition } from 'actslib';
+import { of } from 'rxjs';
 import { vi } from 'vitest';
 
 import type { KnowledgeExerciseFileContent, LearningContent } from '../../../interfaces';
-import { QuestionBankTypeEnum, RatingOperatorEnum } from '../../../interfaces';
-import { LearningContentService } from '../../../services/learning-content.service';
-import { LearningRatingService } from '../../../services/learning-rating.service';
-import { UIService } from '../../../services/ui.service';
-import { FooterComponent } from '../../../shared/footer/footer';
-import { MarkdownContentComponent } from '../../../shared/markdown-content';
-import { AppPageTitle } from '../../page-title/page-title';
-
-import {
-  KnowledgeExercisesListComponent,
-  KnowledgeExercisesPrintOptionsDialogComponent,
-  KnowledgeSelectByCountDialogComponent,
-  KnowledgeSelectByIDDialogComponent,
-  KnowledgeSelectFreeDialogComponent,
-  KnowledgeSelectByRatingDialogComponent,
-} from './knowledge-exercises-list.component';
-
-// Stub class for the AppPageTitle service
-class MockAppPageTitle {
-  _title = '';
-  _originalTitle = 'Knowledge Builder';
-
-  get title(): string {
-    return this._title;
-  }
-
-  set title(title: string) {
-    this._title = title;
-  }
-}
-
-function createMockTranslocoService() {
-  const mock = {
-    setActiveLang: vi.fn(),
-    getActiveLang: vi.fn(),
-    selectTranslate: vi.fn().mockReturnValue(of('')),
-    _loadDependencies: vi.fn().mockReturnValue(of(null)),
-    translate: vi.fn((key: string) => key),
-    activeLang: 'en',
-    config: {
-      reRenderOnLangChange: true,
-      prodMode: false,
-    },
-    langChanges$: of('en'),
-    events$: of(),
-  };
-  return mock;
-}
+import { QuestionBankTypeEnum } from '../../../interfaces';
+
+import { KnowledgeExercisesListComponent } from './knowledge-exercises-list.component';
+
+const emptyRoot: IFilterDefinition = { join: FilterJoinType.AND, conditions: [] };
+
+const mockFiles: LearningContent[] = [
+  { id: 1, categoryId: 6, nameEnglish: 'File1', nameChinese: '文件一', fileUrl: 'data/file1.json' },
+];
+
+const mockItems: KnowledgeExerciseFileContent[] = [
+  {
+    id: '1',
+    order: 1,
+    itemType: QuestionBankTypeEnum.SingleChoice,
+    question: 'What is 1+1?',
+    options: { A: '1', B: '2', C: '3', D: '4' },
+    answer: 'B',
+    tags: ['math'],
+    itemTypeString: '单选题',
+    hasAnswer: true,
+  },
+  {
+    id: '2',
+    order: 2,
+    itemType: QuestionBankTypeEnum.TrueFalse,
+    question: 'The sky is blue',
+    answer: '1',
+    itemTypeString: '判断题',
+    hasAnswer: true,
+  },
+];
 
 describe('KnowledgeExercisesListComponent', () => {
   let component: KnowledgeExercisesListComponent;
   let fixture: ComponentFixture<KnowledgeExercisesListComponent>;
-  let mockLearningContentService: any;
-  let mockUiService: any;
-  let mockRouter: any;
-
-  const mockLearningContents: LearningContent[] = [
-    {
-      id: 1,
-      categoryId: 6,
-      nameChinese: 'test-file-1',
-      nameEnglish: 'test-file-1',
-      fileUrl: 'storage/knowledge-exercises/file1.json',
-      createdAt: '2024-01-01',
-      updatedAt: '2024-01-01',
-    },
-    {
-      id: 2,
-      categoryId: 6,
-      nameChinese: 'test-file-2',
-      nameEnglish: 'test-file-2',
-      fileUrl: 'storage/knowledge-exercises/file2.json',
-      includeLatex: true,
-      createdAt: '2024-01-01',
-      updatedAt: '2024-01-01',
-    },
-  ];
-
-  const mockKnowledgeContent: KnowledgeExerciseFileContent[] = [
-    {
-      id: '1',
-      itemType: QuestionBankTypeEnum.FillInTheBlank,
-      question: 'Test question 1?',
-      answer: 'answer1',
-    },
-    {
-      id: '2',
-      itemType: QuestionBankTypeEnum.MultipleChoice,
-      question: 'Test question 2?',
-      answer: 'answer2',
-    },
-  ];
+  let dataSource: MatTableDataSource<KnowledgeExerciseFileContent>;
+  let selection: SelectionModel<KnowledgeExerciseFileContent>;
 
   beforeEach(async () => {
-    const learningContentSpy = {
-      getKnowledgeBankContents: vi.fn(),
-      getKnowledgeExerciseContent: vi.fn(),
-      getStorageFileBaseUrl: vi
-        .fn()
-        .mockReturnValue('https://api.test.com/api/Storage/knowledge-exercises/'),
-      getStorageFileUrl: vi.fn(
-        (url: string) => `https://api.test.com/${url.replace('storage/', '')}`
-      ),
+    dataSource = new MatTableDataSource<KnowledgeExerciseFileContent>();
+    dataSource.data = mockItems.slice();
+    selection = new SelectionModel<KnowledgeExerciseFileContent>(true, []);
+
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key.split('.').pop() ?? key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
     };
-    const uiSpy = { setSelectedExerciseItem: vi.fn() };
-    const routerSpy = { navigate: vi.fn() };
 
     await TestBed.configureTestingModule({
-      imports: [
-        BrowserAnimationsModule,
-        RouterTestingModule,
-        MatButtonModule,
-        MatCheckboxModule,
-        MatDialogModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatInputModule,
-        MatPaginatorModule,
-        MatSelectModule,
-        MatTableModule,
-        MatToolbarModule,
-        MatDividerModule,
-        MatSnackBarModule,
-        ReactiveFormsModule,
-        FormsModule,
-        FooterComponent,
-        MarkdownContentComponent,
-        TranslocoModule,
-      ],
+      imports: [KnowledgeExercisesListComponent, NoopAnimationsModule],
       providers: [
-        { provide: LearningContentService, useValue: learningContentSpy },
-        { provide: UIService, useValue: uiSpy },
-        { provide: Router, useValue: routerSpy },
-        { provide: Title, useValue: { setTitle: vi.fn() } },
-        { provide: AppPageTitle, useClass: MockAppPageTitle },
-        { provide: TranslocoService, useValue: createMockTranslocoService() },
+        { provide: TranslocoService, useValue: mockTranslocoService },
         { provide: TRANSLOCO_TRANSPILER, useValue: {} },
         { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
       ],
     }).compileComponents();
 
-    mockLearningContentService = TestBed.inject(LearningContentService) as any;
-    mockUiService = TestBed.inject(UIService) as any;
-    mockRouter = TestBed.inject(Router) as any;
-
     fixture = TestBed.createComponent(KnowledgeExercisesListComponent);
     component = fixture.componentInstance;
-  });
-
-  it('should create', () => {
+    fixture.componentRef.setInput('allFiles', mockFiles);
+    fixture.componentRef.setInput('selectedFile', mockFiles[0]);
+    fixture.componentRef.setInput('isLoadingContents', false);
+    fixture.componentRef.setInput('dataSource', dataSource);
+    fixture.componentRef.setInput('selection', selection);
+    fixture.componentRef.setInput('contentRatings', new Map<number, number>());
+    fixture.componentRef.setInput('filterDefinition', emptyRoot);
+    fixture.componentRef.setInput('appliedFreeText', '');
+  });
+
+  it('should create and render the table', () => {
+    fixture.detectChanges();
     expect(component).toBeTruthy();
   });
 
-  describe('ngOnInit', () => {
-    it('should initialize component and load knowledge exercise files', () => {
-      mockLearningContentService.getKnowledgeBankContents.mockReturnValue(of(mockLearningContents));
-
-      component.ngOnInit();
-
-      expect(mockLearningContentService.getKnowledgeBankContents).toHaveBeenCalled();
-      expect(component.allFiles).toEqual(mockLearningContents);
-    });
-
-    it('should mark the OnPush view for check after the file list arrives (no click needed)', () => {
-      // Regression: the file list lands in an async subscribe callback (not a
-      // template event, not an async pipe). With ChangeDetectionStrategy.OnPush
-      // the view is not marked dirty automatically, so the files dropdown stayed
-      // empty until a later DOM event triggered detection. The component must
-      // call markForCheck() once the list is ready.
-      mockLearningContentService.getKnowledgeBankContents.mockReturnValue(of(mockLearningContents));
-      const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-      markForCheckSpy.mockClear();
-
-      component.ngOnInit();
-
-      expect(component.allFiles).toEqual(mockLearningContents);
-      expect(markForCheckSpy).toHaveBeenCalled();
-    });
-
-    it('should handle error when loading knowledge exercise files', () => {
-      vi.spyOn(console, 'error').mockImplementation(() => {});
-      mockLearningContentService.getKnowledgeBankContents.mockReturnValue(
-        throwError(() => new Error('Error'))
-      );
-
-      component.ngOnInit();
-
-      expect(mockLearningContentService.getKnowledgeBankContents).toHaveBeenCalled();
-      expect(console.error).toHaveBeenCalledWith(expect.any(Error));
-    });
+  it('should expose the full column set', () => {
+    expect(component.displayedColumns).toEqual([
+      'select',
+      'id',
+      'itemtype',
+      'difficulty',
+      'suggestedCompletionTime',
+      'tags',
+      'extraInfo',
+      'rating',
+    ]);
   });
 
-  describe('onFileSelectionChanged', () => {
-    beforeEach(() => {
-      // First populate the component by calling ngOnInit
-      mockLearningContentService.getKnowledgeBankContents.mockReturnValue(of(mockLearningContents));
-      component.ngOnInit();
-    });
-
-    it('should load knowledge content for selected file', () => {
-      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(
-        of(mockKnowledgeContent)
-      );
-      const event = { value: mockLearningContents[0] } as any;
-
-      component.onFileSelectionChanged(event);
+  it('should count visible rows from the filter', () => {
+    expect(component.visibleRowCount).toBe(2);
 
-      expect(mockLearningContentService.getKnowledgeExerciseContent).toHaveBeenCalledWith(
-        'storage/knowledge-exercises/file1.json'
-      );
-      expect(component.dataSource.data).toEqual(mockKnowledgeContent);
-    });
-
-    it('should clear data when "None" is selected', () => {
-      const event = { value: null } as any;
-
-      component.onFileSelectionChanged(event);
-
-      expect(component.dataSource.data).toEqual([]);
-    });
-
-    it('should handle error when loading knowledge content', () => {
-      vi.spyOn(console, 'error').mockImplementation(() => {});
-      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(
-        throwError(() => new Error('Error'))
-      );
-      const event = { value: mockLearningContents[0] } as any;
-
-      component.onFileSelectionChanged(event);
-
-      expect(mockLearningContentService.getKnowledgeExerciseContent).toHaveBeenCalledWith(
-        'storage/knowledge-exercises/file1.json'
-      );
-      expect(console.error).toHaveBeenCalledWith(expect.any(Error));
-    });
+    dataSource.filter = 'sky';
+    expect(component.visibleRowCount).toBe(1);
   });
 
-  describe('selection methods', () => {
-    beforeEach(() => {
-      component.dataSource.data = mockKnowledgeContent;
-    });
-
-    it('should select all rows when not all are selected', () => {
-      expect(component.isAllSelected()).toBe(false);
-
-      component.toggleAllRows();
-
-      expect(component.selection.selected.length).toBe(2);
-      expect(component.isAllSelected()).toBe(true);
-    });
-
-    it('should clear selection when all are selected', () => {
-      component.selection.select(...mockKnowledgeContent);
-      expect(component.isAllSelected()).toBe(true);
-
-      component.toggleAllRows();
-
-      expect(component.selection.selected.length).toBe(0);
-      expect(component.isAllSelected()).toBe(false);
-    });
-
-    it('should return correct item count', () => {
-      component.dataSource.data = mockKnowledgeContent;
-
-      const count = component.itemCount;
+  it('isAllSelected should compare against visible rows only', () => {
+    // The filter hides mockItems[0]; only the visible row's state counts.
+    selection.select(mockItems[0]);
+    selection.select(mockItems[1]);
+    dataSource.filter = 'sky';
+    fixture.detectChanges();
 
-      expect(count).toBe(2);
-    });
+    expect(component.isAllSelected()).toBe(true);
   });
 
-  describe('applyFilter', () => {
-    it('should apply filter to data source', () => {
-      component.dataSource.data = mockKnowledgeContent.slice();
-      component['originalData'] = mockKnowledgeContent.slice();
-      const event = { target: { value: 'Test' } } as unknown as Event;
-
-      component.applyFilter(event);
+  it('isAllSelected should be false when a visible row is missing from the selection', () => {
+    selection.select(mockItems[0]);
 
-      expect(component.dataSource.data.length).toBe(2);
-    });
+    expect(component.isAllSelected()).toBe(false);
   });
 
-  describe('detail view methods', () => {
-    beforeEach(() => {
-      component.dataSource.data = mockKnowledgeContent;
-    });
-
-    it('should switch to detail view', () => {
-      component.onShowDetail('1');
-
-      expect(component.contentToDisplay).toBe(component.ContentToDisplay.Detail);
-      expect(component.selectedElementIdx).toBe(0);
-    });
-
-    it('should go back to list view', () => {
-      component.onBackToList();
-
-      expect(component.contentToDisplay).toBe(component.ContentToDisplay.List);
-      expect(component.showDetailAnswer).toBe(false);
-      expect(component.showDetailHintOfAnswer).toBe(false);
-    });
-
-    it('should clear hintOfAnswerMarkdownStr when going back to list', () => {
-      component.hintOfAnswerMarkdownStr = 'old hint';
-      component.showDetailHintOfAnswer = true;
-
-      component.onBackToList();
-
-      expect(component.hintOfAnswerMarkdownStr).toEqual('');
-      expect(component.showDetailHintOfAnswer).toBe(false);
-    });
-
-    it('should toggle answer visibility', () => {
-      component.onToggleAnswer();
-
-      expect(component.showDetailAnswer).toBe(true);
-
-      component.onToggleAnswer();
-
-      expect(component.showDetailAnswer).toBe(false);
-    });
-
-    it('should toggle hint visibility', () => {
-      component.onToggleHintOfAnswer();
-
-      expect(component.showDetailHintOfAnswer).toBe(true);
-
-      component.onToggleHintOfAnswer();
-
-      expect(component.showDetailHintOfAnswer).toBe(false);
-    });
-
-    it('should generate hint markdown when showing detail for composite type', () => {
-      component.dataSource.data = [
-        {
-          id: 'rc-1',
-          itemType: QuestionBankTypeEnum.ReadingComprehension,
-          question: 'Passage',
-          items: [
-            {
-              id: 'sub-1',
-              itemType: QuestionBankTypeEnum.SingleChoice,
-              question: '(1)',
-              options: { A: 'A', B: 'B' },
-              answer: 'A',
-              hintofanswer: 'Hint text',
-            },
-          ],
-        },
-      ];
-      component.onShowDetail('rc-1');
-
-      expect(component.hintOfAnswerMarkdownStr).toContain('*1*');
-      expect(component.hintOfAnswerMarkdownStr).toContain('Hint text');
-    });
-
-    it('should clear hintOfAnswerMarkdownStr when showing element with no hints', () => {
-      component.dataSource.data = [
-        {
-          id: 'rc-1',
-          itemType: QuestionBankTypeEnum.ReadingComprehension,
-          question: 'Passage',
-          items: [
-            {
-              id: 'sub-1',
-              itemType: QuestionBankTypeEnum.SingleChoice,
-              question: '(1)',
-              options: { A: 'A', B: 'B' },
-              answer: 'A',
-            },
-          ],
-        },
-      ];
-      component.hintOfAnswerMarkdownStr = 'old hint';
-      component.onShowDetail('rc-1');
+  it('should seed the selection count on init and track changes', () => {
+    selection.select(mockItems[0]);
+    fixture.detectChanges();
+    expect(component.selectionCount()).toBe(1);
 
-      expect(component.hintOfAnswerMarkdownStr).toEqual('');
-    });
+    selection.select(mockItems[1]);
+    expect(component.selectionCount()).toBe(2);
   });
 
-  describe('navigation methods', () => {
-    beforeEach(() => {
-      component.dataSource.data = mockKnowledgeContent;
-      component.selectedElementIdx = 0;
-    });
-
-    it('should go to previous item', () => {
-      component.selectedElementIdx = 1;
-
-      component.onPreviousItem();
-
-      expect(component.selectedElementIdx).toBe(0);
-    });
-
-    it('should go to next item', () => {
-      component.onNextItem();
-
-      expect(component.selectedElementIdx).toBe(1);
-    });
-
-    it('should reset hint state when navigating to previous item', () => {
-      component.showDetailHintOfAnswer = true;
-      component.hintOfAnswerMarkdownStr = 'hint';
-      component.selectedElementIdx = 1;
-
-      component.onPreviousItem();
+  it('should seed the free text box from the applied filter', () => {
+    fixture.componentRef.setInput('appliedFreeText', 'sky');
 
-      expect(component.showDetailHintOfAnswer).toBe(false);
-      expect(component.hintOfAnswerMarkdownStr).toEqual('');
-    });
-
-    it('should reset hint state when navigating to next item', () => {
-      component.showDetailHintOfAnswer = true;
-      component.hintOfAnswerMarkdownStr = 'hint';
+    fixture.detectChanges();
 
-      component.onNextItem();
-
-      expect(component.showDetailHintOfAnswer).toBe(false);
-      expect(component.hintOfAnswerMarkdownStr).toEqual('');
-    });
+    expect(component.freeText).toBe('sky');
   });
 
-  describe('onShowDetail edge cases', () => {
-    beforeEach(() => {
-      component.dataSource.data = mockKnowledgeContent;
-    });
-
-    it('should handle showing detail for non-existent element id', () => {
-      component.onShowDetail('999');
+  it('should emit free text changes live', () => {
+    fixture.detectChanges();
+    const emitted: string[] = [];
+    component.freeTextChanged.subscribe(v => emitted.push(v));
 
-      // View must stay on the list when the id is not found (no stale detail).
-      expect(component.contentToDisplay).toBe(component.ContentToDisplay.List);
-      expect(component.selectedElementIdx).toBe(-1);
-    });
+    component.onFreeTextChanged('sky');
 
-    it('should set selected element when found', () => {
-      vi.spyOn(component as any, 'setSelectedElement');
-
-      component.onShowDetail('2');
-
-      expect(component.contentToDisplay).toBe(component.ContentToDisplay.Detail);
-      expect(component.selectedElementIdx).toBe(1);
-      expect(component.setSelectedElement).toHaveBeenCalled();
-    });
+    expect(emitted).toEqual(['sky']);
   });
 
-  describe('onPreview and dialog interaction', () => {
-    beforeEach(() => {
-      component.dataSource.data = mockKnowledgeContent;
-      component.selection.select(mockKnowledgeContent[0]);
-      component.selectedFile = mockLearningContents[0];
-    });
-
-    it('should open print options dialog with correct data', () => {
-      const mockDialogRef = {
-        afterClosed: () => of(undefined),
-      };
-      vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-      component.onPreview();
+  it('should suppress live filtering during IME composition', () => {
+    fixture.detectChanges();
+    const emitted: string[] = [];
+    component.freeTextChanged.subscribe(v => emitted.push(v));
 
-      expect(component.dialog.open).toHaveBeenCalledWith(
-        KnowledgeExercisesPrintOptionsDialogComponent,
-        expect.objectContaining({
-          data: { defaultTitle: 'test-file-1' },
-          width: '600px',
-          height: '500px',
-        })
-      );
-    });
-
-    it('should update print settings when dialog returns result', () => {
-      const mockResult = {
-        formTitle: 'Test Form',
-        printEntryDate: true,
-        printScore: true,
-        printAnswer: false,
-        printHintOfAnswer: true,
-        hideLabelOfQuestionType: [QuestionBankTypeEnum.MultipleChoice],
-        shuffleOptionsInSelection: false,
-      };
-      const mockDialogRef = {
-        afterClosed: () => of(mockResult),
-      };
-      vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-      vi.spyOn(component as any, 'onPreviewCore');
-
-      component.onPreview();
-
-      expect(component.printSetting.formTitle).toBe('Test Form');
-      expect(component.printSetting.printEntryDate).toBe(true);
-      expect(component.printSetting.printScore).toBe(true);
-      expect(component.printSetting.printAnswer).toBe(false);
-      expect(component.printSetting.printHintOfAnswer).toBe(true);
-      expect(component.printSetting.hideLabelOfQuestionType).toEqual([
-        QuestionBankTypeEnum.MultipleChoice,
-      ]);
-      expect(component.printSetting.shuffleOptionsInSelection).toBe(false);
-    });
-
-    it('should call onPreviewCore when dialog confirms', () => {
-      const mockResult = {
-        formTitle: 'Test',
-        printEntryDate: false,
-        printScore: false,
-        printAnswer: false,
-        printHintOfAnswer: false,
-        hideLabelOfQuestionType: [],
-        shuffleOptionsInSelection: true,
-      };
-      const mockDialogRef = {
-        afterClosed: () => of(mockResult),
-      };
-      vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-      vi.spyOn(component as any, 'onPreviewCore');
-
-      component.onPreview();
+    component.onCompositionStart();
+    // Intermediate pinyin fragments fire input events; they must not filter.
+    component.onFreeTextChanged('s');
+    component.onFreeTextChanged('sk');
+    expect(emitted).toEqual([]);
 
-      expect(component['onPreviewCore']).toHaveBeenCalled();
-    });
-
-    it('should not update settings when dialog is cancelled', () => {
-      const originalTitle = component.printSetting.formTitle;
-      const mockDialogRef = {
-        afterClosed: () => of(undefined),
-      };
-      vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-      vi.spyOn(component as any, 'onPreviewCore');
-
-      component.onPreview();
-
-      expect(component.printSetting.formTitle).toBe(originalTitle);
-      expect(component['onPreviewCore']).not.toHaveBeenCalled();
-    });
+    // compositionend delivers the final text and reopens live filtering.
+    component.onCompositionEnd('天空');
+    expect(emitted).toEqual(['天空']);
+    component.onFreeTextChanged('天空 x');
+    expect(emitted).toEqual(['天空', '天空 x']);
   });
 
-  describe('selection menu methods', () => {
-    const mockContentWithIDs: KnowledgeExerciseFileContent[] = [
-      {
-        id: '10',
-        itemType: QuestionBankTypeEnum.FillInTheBlank,
-        question: 'Question 10?',
-        answer: 'answer10',
-        tags: ['math', 'algebra'],
-      },
-      {
-        id: '20',
-        itemType: QuestionBankTypeEnum.MultipleChoice,
-        question: 'Question 20?',
-        answer: 'answer20',
-        tags: ['science', 'physics'],
-      },
-      {
-        id: '30',
-        itemType: QuestionBankTypeEnum.TrueFalse,
-        question: 'Question 30?',
-        answer: 'true',
-        tags: ['MATH', 'geometry'],
-      },
-    ];
-
-    beforeEach(() => {
-      component.dataSource.data = mockContentWithIDs;
-    });
-
-    describe('onSelectByCount', () => {
-      it('should open the By Count dialog', () => {
-        const mockDialogRef = { afterClosed: () => of(undefined) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByCount();
-
-        expect(component.dialog.open).toHaveBeenCalledWith(
-          KnowledgeSelectByCountDialogComponent,
-          expect.objectContaining({ data: {}, width: '400px' })
-        );
-      });
-
-      it('should select the requested count from the start by default', () => {
-        const mockDialogRef = {
-          afterClosed: () => of({ countOfItems: 2, countOfOffset: 0 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByCount();
-
-        expect(component.selection.selected.length).toBe(2);
-        expect(component.selection.selected[0].id).toBe('10');
-        expect(component.selection.selected[1].id).toBe('20');
-      });
-
-      it('should respect the offset', () => {
-        const mockDialogRef = {
-          afterClosed: () => of({ countOfItems: 1, countOfOffset: 1 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByCount();
-
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('20');
-      });
-
-      it('should clear the previous selection before applying the new count', () => {
-        component.selection.select(mockContentWithIDs[0]);
-        const mockDialogRef = {
-          afterClosed: () => of({ countOfItems: 1, countOfOffset: 2 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByCount();
-
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('30');
-      });
-
-      it('should mark the OnPush view for check after applying the count selection', () => {
-        const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-        markForCheckSpy.mockClear();
-        const mockDialogRef = {
-          afterClosed: () => of({ countOfItems: 1, countOfOffset: 0 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByCount();
-
-        expect(markForCheckSpy).toHaveBeenCalled();
-      });
-
-      it('should not change selection when the dialog is cancelled', () => {
-        component.selection.select(mockContentWithIDs[0]);
-        const before = component.selection.selected.length;
-        const mockDialogRef = { afterClosed: () => of(undefined) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByCount();
-
-        expect(component.selection.selected.length).toBe(before);
-      });
-    });
-
-    describe('onSelectByID', () => {
-      it('should open the By ID dialog', () => {
-        const mockDialogRef = { afterClosed: () => of(undefined) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByID();
-
-        expect(component.dialog.open).toHaveBeenCalledWith(
-          KnowledgeSelectByIDDialogComponent,
-          expect.objectContaining({ data: {}, width: '500px' })
-        );
-      });
-
-      it('should select items by comma-separated IDs', () => {
-        const mockDialogRef = { afterClosed: () => of({ importIDs: '10,20' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByID();
-
-        expect(component.selection.selected.length).toBe(2);
-        const ids = component.selection.selected.map(i => i.id);
-        expect(ids).toContain('10');
-        expect(ids).toContain('20');
-      });
-
-      it('should trim whitespace around IDs', () => {
-        const mockDialogRef = { afterClosed: () => of({ importIDs: ' 10 , 30 ' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByID();
-
-        expect(component.selection.selected.length).toBe(2);
-        const ids = component.selection.selected.map(i => i.id);
-        expect(ids).toContain('10');
-        expect(ids).toContain('30');
-      });
-
-      it('should handle non-matching IDs gracefully', () => {
-        const mockDialogRef = { afterClosed: () => of({ importIDs: '999,888' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByID();
-
-        expect(component.selection.selected.length).toBe(0);
-      });
-
-      it('should clear the previous selection before selecting by ID', () => {
-        component.selection.select(mockContentWithIDs[0], mockContentWithIDs[1]);
-        const mockDialogRef = { afterClosed: () => of({ importIDs: '30' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByID();
-
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('30');
-      });
-
-      it('should mark the OnPush view for check after applying the ID selection', () => {
-        const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-        markForCheckSpy.mockClear();
-        const mockDialogRef = { afterClosed: () => of({ importIDs: '10' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByID();
-
-        expect(markForCheckSpy).toHaveBeenCalled();
-      });
-
-      it('should not change selection when the dialog is cancelled', () => {
-        component.selection.select(mockContentWithIDs[0]);
-        const before = component.selection.selected.length;
-        const mockDialogRef = { afterClosed: () => of(undefined) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByID();
-
-        expect(component.selection.selected.length).toBe(before);
-      });
-    });
-
-    describe('onSelectFreeSelection', () => {
-      it('should open the Free Selection dialog', () => {
-        const mockDialogRef = { afterClosed: () => of(undefined) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectFreeSelection();
-
-        expect(component.dialog.open).toHaveBeenCalledWith(
-          KnowledgeSelectFreeDialogComponent,
-          expect.objectContaining({ data: {}, width: '400px' })
-        );
-      });
-
-      it('should randomly select the requested count of items', () => {
-        const mockDialogRef = { afterClosed: () => of({ countOfItems: 2, filterOnTag: '' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectFreeSelection();
-
-        expect(component.selection.selected.length).toBe(2);
-      });
-
-      it('should filter by tag before random selection when a tag is specified', () => {
-        const mockDialogRef = { afterClosed: () => of({ countOfItems: 1, filterOnTag: 'math' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectFreeSelection();
-
-        expect(component.selection.selected.length).toBe(1);
-        const tags = component.selection.selected[0].tags || [];
-        expect(tags.some(tag => tag.toLowerCase().includes('math'))).toBe(true);
-      });
-
-      it('should handle the tag filter case-insensitively', () => {
-        const mockDialogRef = { afterClosed: () => of({ countOfItems: 2, filterOnTag: 'MATH' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectFreeSelection();
-
-        expect(component.selection.selected.length).toBe(2);
-        component.selection.selected.forEach(item => {
-          const tags = item.tags || [];
-          expect(tags.some(tag => tag.toLowerCase().includes('math'))).toBe(true);
-        });
-      });
-
-      it('should not exceed available items when requesting more than present', () => {
-        const mockDialogRef = { afterClosed: () => of({ countOfItems: 100, filterOnTag: '' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectFreeSelection();
-
-        expect(component.selection.selected.length).toBe(3);
-      });
-
-      it('should select nothing when the tag filter matches no items', () => {
-        const mockDialogRef = {
-          afterClosed: () => of({ countOfItems: 5, filterOnTag: 'nonexistent' }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectFreeSelection();
-
-        expect(component.selection.selected.length).toBe(0);
-      });
-
-      it('should clear the previous selection before free selection', () => {
-        component.selection.select(mockContentWithIDs[0]);
-        const mockDialogRef = { afterClosed: () => of({ countOfItems: 2, filterOnTag: '' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectFreeSelection();
-
-        expect(component.selection.selected.length).toBe(2);
-      });
-
-      it('should mark the OnPush view for check after applying the free selection', () => {
-        const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-        markForCheckSpy.mockClear();
-        const mockDialogRef = { afterClosed: () => of({ countOfItems: 2, filterOnTag: '' }) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectFreeSelection();
-
-        expect(markForCheckSpy).toHaveBeenCalled();
-      });
-
-      it('should not change selection when the dialog is cancelled', () => {
-        component.selection.select(mockContentWithIDs[0]);
-        const before = component.selection.selected.length;
-        const mockDialogRef = { afterClosed: () => of(undefined) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectFreeSelection();
+  it('should show a New label when no filter is active', () => {
+    expect(component.hasFilter).toBe(false);
+    expect(component.filterMenuLabel).toBe('filterNew');
+  });
 
-        expect(component.selection.selected.length).toBe(before);
-      });
+  it('should summarize text conditions with word labels', () => {
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [{ property: 'tags', operation: FilterOperation.Contains, lowValue: 'sky' }],
     });
 
-    describe('onSelectByRating', () => {
-      beforeEach(() => {
-        // ratings: id10=5, id20=3, id30=0 (unrated). getRating() parses the
-        // string id to a number, so the map is keyed by numeric id.
-        (component as any).contentRatingMap.set(10, 5);
-        (component as any).contentRatingMap.set(20, 3);
-        (component as any).contentRatingMap.set(30, 0);
-      });
-
-      it('should open the By Rating dialog', () => {
-        const mockDialogRef = { afterClosed: () => of(undefined) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.dialog.open).toHaveBeenCalledWith(
-          KnowledgeSelectByRatingDialogComponent,
-          expect.objectContaining({ data: {}, width: '400px' })
-        );
-      });
-
-      it('should select items with rating equals 5', () => {
-        const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.Equals, ratingValue: 5 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('10');
-      });
-
-      it('should select items with rating greater than 3', () => {
-        const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.GreaterThan, ratingValue: 3 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('10');
-      });
-
-      it('should select items with rating larger or equals 3', () => {
-        const mockDialogRef = {
-          afterClosed: () =>
-            of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 3 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(2);
-        expect(component.selection.selected.some(i => i.id === '10')).toBe(true);
-        expect(component.selection.selected.some(i => i.id === '20')).toBe(true);
-      });
-
-      it('should select items with rating below the value, including unrated (0)', () => {
-        // ratings: id10=5, id20=3, id30=0. LessThan 4 → id20 (3) and id30 (0);
-        // unrated (0) compares numerically (0 < 4); use < 1 for unrated-only.
-        const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 4 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(2);
-        expect(component.selection.selected.some(i => i.id === '20')).toBe(true);
-        expect(component.selection.selected.some(i => i.id === '30')).toBe(true);
-      });
-
-      it('should select only unrated (0) items when no rated item is below the value', () => {
-        // ratings: id10=5, id20=3, id30=0. LessThan 2 → only id30 (unrated, 0 < 2).
-        const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 2 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('30');
-      });
-
-      it('should select items with rating less or equals 3, including unrated', () => {
-        // ratings: id10=5, id20=3, id30=0. LessOrEquals 3 → id20 (3) and id30 (0);
-        // unrated (0) compares numerically (0 <= 3).
-        const mockDialogRef = {
-          afterClosed: () =>
-            of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 3 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(2);
-        expect(component.selection.selected.some(i => i.id === '20')).toBe(true);
-        expect(component.selection.selected.some(i => i.id === '30')).toBe(true);
-      });
-
-      it('should select only unrated (0) for less or equals when no rated item is at or below the value', () => {
-        // ratings: id10=5, id20=3, id30=0. LessOrEquals 2 → only id30 (unrated, 0 <= 2).
-        const mockDialogRef = {
-          afterClosed: () =>
-            of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 2 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('30');
-      });
-
-      it('should select items with any rating (>= 1)', () => {
-        // ratings: id10=5, id20=3, id30=0. LargerOrEquals 1 → id10, id20.
-        const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(2);
-      });
-
-      it('should select items with no rating (< 1)', () => {
-        // ratings: id10=5, id20=3, id30=0. LessThan 1 → only id30 (unrated, 0 < 1).
-        const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('30');
-      });
-
-      it('should clear the previous selection before applying the rating match', () => {
-        component.selection.select(mockContentWithIDs[0]);
-        const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(1);
-        expect(component.selection.selected[0].id).toBe('30');
-      });
-
-      it('should not change selection when the dialog is cancelled', () => {
-        component.selection.select(mockContentWithIDs[0]);
-        const before = component.selection.selected.length;
-        const mockDialogRef = { afterClosed: () => of(undefined) };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(component.selection.selected.length).toBe(before);
-      });
-
-      it('should mark the OnPush view for check after applying the rating selection', () => {
-        const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-        markForCheckSpy.mockClear();
-        const mockDialogRef = {
-          afterClosed: () => of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 }),
-        };
-        vi.spyOn(component.dialog, 'open').mockReturnValue(mockDialogRef as any);
-
-        component.onSelectByRating();
-
-        expect(markForCheckSpy).toHaveBeenCalled();
-      });
-    });
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toContain('sky');
+    expect(component.filterMenuLabel).toContain('opContains');
   });
 
-  describe('onPreviewCore', () => {
-    const mockItemWithSubItems: KnowledgeExerciseFileContent = {
-      id: '3',
-      itemType: QuestionBankTypeEnum.ReadingComprehension,
-      question: 'Reading passage',
-      answer: 'N/A',
-      items: [
-        {
-          id: '3-1',
-          itemType: QuestionBankTypeEnum.MultipleChoice,
-          question: 'Sub question 1?',
-          answer: 'A',
-        },
+  it('should render an enum leaf with the choice label, not the member or an operator word', () => {
+    // The enum leaf shows the table's Type description; the raw member value
+    // and operator words must not appear.
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [
         {
-          id: '3-2',
-          itemType: QuestionBankTypeEnum.MultipleChoice,
-          question: 'Sub question 2?',
-          answer: 'B',
+          property: 'itemType',
+          operation: FilterOperation.Equal,
+          lowValue: QuestionBankTypeEnum.SingleChoice,
+          enumValues: QuestionBankTypeEnum,
         },
       ],
-    };
-
-    beforeEach(() => {
-      component.dataSource.data = [mockKnowledgeContent[0], mockItemWithSubItems];
-      component.selectedFile = mockLearningContents[0];
-      component.printSetting = {
-        formTitle: 'Test',
-        printEntryDate: false,
-        printScore: false,
-        printAnswer: false,
-        printHintOfAnswer: false,
-        printID: true,
-        hideLabelOfQuestionType: [],
-        shuffleOptionsInSelection: false,
-      };
-    });
-
-    it('should set order for selected items', () => {
-      component.selection.select(mockKnowledgeContent[0], mockItemWithSubItems);
-
-      component['onPreviewCore']();
-
-      expect(component.selection.selected[0].order).toBe(1);
-      expect(component.selection.selected[1].order).toBe(2);
-    });
-
-    it('should set order for sub-items when they exist', () => {
-      component.selection.select(mockItemWithSubItems);
-
-      component['onPreviewCore']();
-
-      expect(mockItemWithSubItems.items![0].order).toBe(1);
-      expect(mockItemWithSubItems.items![1].order).toBe(2);
-    });
-
-    it('should call uiService.setSelectedExerciseItem with correct parameters', () => {
-      component.selection.select(mockKnowledgeContent[0]);
-
-      component['onPreviewCore']();
-
-      expect(mockUiService.setSelectedExerciseItem).toHaveBeenCalledWith(
-        expect.any(Array),
-        component.printSetting,
-        false,
-        undefined
-      );
-    });
-
-    it('should navigate to displayv2 route', () => {
-      component.selection.select(mockKnowledgeContent[0]);
-
-      component['onPreviewCore']();
-
-      expect(mockRouter.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
-    });
-
-    it('should handle items without sub-items', () => {
-      component.selection.select(mockKnowledgeContent[0]);
-
-      expect(() => component['onPreviewCore']()).not.toThrow();
-
-      expect(component.selection.selected[0].order).toBe(1);
-    });
-
-    it('should use includeLatex flag from file metadata', () => {
-      // mockLearningContents[1] has includeLatex: true (from mockMetaFiles)
-      component.selectedFile = mockLearningContents[1];
-      component.selection.select(mockKnowledgeContent[0]);
-
-      component['onPreviewCore']();
-
-      expect(mockUiService.setSelectedExerciseItem).toHaveBeenCalledWith(
-        expect.any(Array),
-        component.printSetting,
-        true,
-        undefined
-      );
-    });
-  });
-
-  describe('onContentRatingChanged', () => {
-    it('should not save and should restore the previous selection when the toggle is deselected', () => {
-      // Clicking the active toggle in a mat-button-toggle-group deselects it,
-      // emitting change with value undefined.
-      const ratingService = TestBed.inject(LearningRatingService);
-      const upsertSpy = vi.spyOn(ratingService, 'upsertRating');
-      (component as any).currentContentId = 1;
-      const group = { value: undefined as unknown };
-      const event = { value: undefined, source: { value: 2, buttonToggleGroup: group } } as any;
-
-      component.onContentRatingChanged({ id: '10' } as any, event);
-
-      expect(upsertSpy).not.toHaveBeenCalled();
-      expect(group.value).toBe(2);
-    });
-  });
-});
-
-describe('KnowledgeExercisesPrintOptionsDialogComponent', () => {
-  let component: KnowledgeExercisesPrintOptionsDialogComponent;
-  let fixture: ComponentFixture<KnowledgeExercisesPrintOptionsDialogComponent>;
-  let mockDialogRef: any;
-  let mockSnackBar: any;
-
-  beforeEach(async () => {
-    const dialogRefSpy = { close: vi.fn() };
-    const snackBarSpy = { open: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [
-        MatFormFieldModule,
-        FormsModule,
-        MatInputModule,
-        MatCheckboxModule,
-        MatButtonModule,
-        MatDialogModule,
-        MatSelectModule,
-        MatRadioModule,
-        MatDatepickerModule,
-        MatDateFnsModule,
-        MatSnackBarModule,
-        TranslocoModule,
-      ],
-      providers: [
-        { provide: MAT_DIALOG_DATA, useValue: { defaultTitle: 'Test Title' } },
-        { provide: MatDialogRef, useValue: dialogRefSpy },
-        { provide: MatSnackBar, useValue: snackBarSpy },
-        { provide: TranslocoService, useValue: createMockTranslocoService() },
-        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
-        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(KnowledgeExercisesPrintOptionsDialogComponent);
-    component = fixture.componentInstance;
-    mockDialogRef = TestBed.inject(MatDialogRef) as any;
-    mockSnackBar = TestBed.inject(MatSnackBar) as any;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with default title', () => {
-    expect(component.formTitle()).toBe('Test Title');
-  });
-
-  it('should close dialog without data when onNoClick called', () => {
-    component.onNoClick();
-
-    expect(mockDialogRef.close).toHaveBeenCalledWith();
-  });
-
-  it('should show error when form title is empty on submit', () => {
-    component.formTitle.set('');
-
-    component.onYesClick();
-
-    expect(mockSnackBar.open).toHaveBeenCalledWith('required_field', 'close', {
-      duration: 3000,
-    });
-    expect(mockDialogRef.close).not.toHaveBeenCalled();
-  });
-
-  it('should show error when form title is whitespace only', () => {
-    component.formTitle.set('   ');
-
-    component.onYesClick();
-
-    expect(mockSnackBar.open).toHaveBeenCalledWith('required_field', 'close', {
-      duration: 3000,
-    });
-    expect(mockDialogRef.close).not.toHaveBeenCalled();
-  });
-
-  it('should close with print options data when form is valid', () => {
-    component.formTitle.set('Valid Title');
-    component.printEntryDate.set(true);
-    component.printScore.set(false);
-
-    component.onYesClick();
-
-    expect(mockDialogRef.close).toHaveBeenCalledWith(
-      expect.objectContaining({
-        formTitle: 'Valid Title',
-        printEntryDate: true,
-        printScore: false,
-      })
-    );
-  });
-
-  it('should include all form fields in close data', () => {
-    component.formTitle.set('Complete Form');
-    component.printEntryDate.set(true);
-    component.printScore.set(false);
-    component.printAnswer.set(true);
-    component.printHintOfAnswer.set(false);
-    component.printID.set(true);
-    component.hideLabelOfQuestionType.set(['MultipleChoice'] as any);
-    component.shuffleOptionsInSelection.set(true);
-
-    component.onYesClick();
-
-    expect(mockDialogRef.close).toHaveBeenCalledWith({
-      formTitle: 'Complete Form',
-      printEntryDate: true,
-      printScore: false,
-      printAnswer: true,
-      printHintOfAnswer: false,
-      printID: true,
-      hideLabelOfQuestionType: ['MultipleChoice'],
-      shuffleOptionsInSelection: true,
-    });
-  });
-
-  it('should handle hideLabelOfQuestionType selection', () => {
-    component.formTitle.set('Test');
-    component.hideLabelOfQuestionType.set(['MultipleChoice', 'FillInTheBlank'] as any);
-
-    component.onYesClick();
-
-    const closeArg = mockDialogRef.close.mock.lastCall?.[0];
-    expect(closeArg.hideLabelOfQuestionType).toEqual(['MultipleChoice', 'FillInTheBlank']);
-  });
-
-  it('should handle shuffleOptionsInSelection toggle', () => {
-    component.formTitle.set('Test');
-    component.shuffleOptionsInSelection.set(false);
-
-    component.onYesClick();
-
-    const closeArg = mockDialogRef.close.mock.lastCall?.[0];
-    expect(closeArg.shuffleOptionsInSelection).toBe(false);
-  });
-});
-
-describe('KnowledgeSelectByCountDialogComponent', () => {
-  let component: KnowledgeSelectByCountDialogComponent;
-  let fixture: ComponentFixture<KnowledgeSelectByCountDialogComponent>;
-  let mockDialogRef: any;
-
-  beforeEach(async () => {
-    const dialogRefSpy = { close: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [TranslocoModule],
-      providers: [
-        { provide: MatDialogRef, useValue: dialogRefSpy },
-        { provide: TranslocoService, useValue: createMockTranslocoService() },
-        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
-        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(KnowledgeSelectByCountDialogComponent);
-    component = fixture.componentInstance;
-    mockDialogRef = TestBed.inject(MatDialogRef) as any;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with default count and offset', () => {
-    expect(component.countOfItems()).toBe(20);
-    expect(component.countOfOffset()).toBe(0);
-  });
-
-  it('should close dialog without data on cancel', () => {
-    component.onNoClick();
-    expect(mockDialogRef.close).toHaveBeenCalledWith();
-  });
-
-  it('should close with count and offset on confirm', () => {
-    component.countOfItems.set(15);
-    component.countOfOffset.set(5);
-    component.onYesClick();
-
-    expect(mockDialogRef.close).toHaveBeenCalledWith({
-      countOfItems: 15,
-      countOfOffset: 5,
     });
-  });
-
-  it('isFormInvalid should be true when count is non-positive', () => {
-    component.countOfItems.set(0);
-    expect(component.isFormInvalid).toBe(true);
-  });
-
-  it('isFormInvalid should be false when count is positive and offset is non-negative', () => {
-    component.countOfItems.set(10);
-    component.countOfOffset.set(0);
-    expect(component.isFormInvalid).toBe(false);
-  });
 
-  it('isFormInvalid should be true when offset is negative', () => {
-    component.countOfItems.set(10);
-    component.countOfOffset.set(-1);
-    expect(component.isFormInvalid).toBe(true);
+    const label = component.filterMenuLabel;
+    expect(label).toContain('单选题');
+    expect(label).not.toContain('SingleChoice');
+    expect(label).not.toContain('opEqual');
   });
-});
 
-describe('KnowledgeSelectByIDDialogComponent', () => {
-  let component: KnowledgeSelectByIDDialogComponent;
-  let fixture: ComponentFixture<KnowledgeSelectByIDDialogComponent>;
-  let mockDialogRef: any;
-
-  beforeEach(async () => {
-    const dialogRefSpy = { close: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [TranslocoModule],
-      providers: [
-        { provide: MatDialogRef, useValue: dialogRefSpy },
-        { provide: TranslocoService, useValue: createMockTranslocoService() },
-        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
-        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+  it('should fold a multi-pick enum OR group into one type list', () => {
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [
+        {
+          join: FilterJoinType.OR,
+          conditions: [
+            { property: 'itemType', operation: FilterOperation.Equal, lowValue: QuestionBankTypeEnum.SingleChoice, enumValues: QuestionBankTypeEnum },
+            { property: 'itemType', operation: FilterOperation.Equal, lowValue: QuestionBankTypeEnum.TrueFalse, enumValues: QuestionBankTypeEnum },
+          ],
+        },
       ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(KnowledgeSelectByIDDialogComponent);
-    component = fixture.componentInstance;
-    mockDialogRef = TestBed.inject(MatDialogRef) as any;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with empty importIDs', () => {
-    expect(component.importIDs()).toBe('');
-  });
-
-  it('should close dialog without data on cancel', () => {
-    component.onNoClick();
-    expect(mockDialogRef.close).toHaveBeenCalledWith();
-  });
-
-  it('should close with importIDs on confirm', () => {
-    component.importIDs.set('1,2,3');
-    component.onYesClick();
-
-    expect(mockDialogRef.close).toHaveBeenCalledWith({
-      importIDs: '1,2,3',
     });
-  });
 
-  it('isFormInvalid should be true when importIDs is empty or whitespace', () => {
-    component.importIDs.set('');
-    expect(component.isFormInvalid).toBe(true);
-
-    component.importIDs.set('   ');
-    expect(component.isFormInvalid).toBe(true);
-  });
-
-  it('isFormInvalid should be false when importIDs has content', () => {
-    component.importIDs.set('1,2,3');
-    expect(component.isFormInvalid).toBe(false);
-  });
-});
-
-describe('KnowledgeSelectFreeDialogComponent', () => {
-  let component: KnowledgeSelectFreeDialogComponent;
-  let fixture: ComponentFixture<KnowledgeSelectFreeDialogComponent>;
-  let mockDialogRef: any;
-
-  beforeEach(async () => {
-    const dialogRefSpy = { close: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [TranslocoModule],
-      providers: [
-        { provide: MatDialogRef, useValue: dialogRefSpy },
-        { provide: TranslocoService, useValue: createMockTranslocoService() },
-        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
-        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(KnowledgeSelectFreeDialogComponent);
-    component = fixture.componentInstance;
-    mockDialogRef = TestBed.inject(MatDialogRef) as any;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
+    expect(component.filterMenuLabel).toContain('单选题/判断题');
   });
 
-  it('should initialize with default count and empty tag', () => {
-    expect(component.countOfItems()).toBe(20);
-    expect(component.filterOnTag()).toBe('');
-  });
-
-  it('should close dialog without data on cancel', () => {
-    component.onNoClick();
-    expect(mockDialogRef.close).toHaveBeenCalledWith();
-  });
-
-  it('should close with count and tag on confirm', () => {
-    component.countOfItems.set(15);
-    component.filterOnTag.set('math');
-    component.onYesClick();
-
-    expect(mockDialogRef.close).toHaveBeenCalledWith({
-      countOfItems: 15,
-      filterOnTag: 'math',
+  it('should summarize rating conditions with comparison symbols', () => {
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [{ property: 'rating', operation: FilterOperation.GreaterOrEqual, lowValue: 3 }],
     });
-  });
 
-  it('isFormInvalid should be true when count is non-positive', () => {
-    component.countOfItems.set(0);
-    expect(component.isFormInvalid).toBe(true);
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toContain('>=');
+    expect(component.filterMenuLabel).toContain('3');
   });
 
-  it('isFormInvalid should be false when count is positive', () => {
-    component.countOfItems.set(5);
-    expect(component.isFormInvalid).toBe(false);
-  });
-});
-
-describe('KnowledgeSelectByRatingDialogComponent', () => {
-  let component: KnowledgeSelectByRatingDialogComponent;
-  let fixture: ComponentFixture<KnowledgeSelectByRatingDialogComponent>;
-  let mockDialogRef: any;
-
-  beforeEach(async () => {
-    const dialogRefSpy = { close: vi.fn() };
-
-    await TestBed.configureTestingModule({
-      imports: [TranslocoModule],
-      providers: [
-        { provide: MatDialogRef, useValue: dialogRefSpy },
-        { provide: TranslocoService, useValue: createMockTranslocoService() },
-        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
-        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(KnowledgeSelectByRatingDialogComponent);
-    component = fixture.componentInstance;
-    mockDialogRef = TestBed.inject(MatDialogRef) as any;
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with default operator and value', () => {
-    expect(component.ratingOperator()).toBe(RatingOperatorEnum.Equals);
-    expect(component.ratingValue()).toBe(3);
-  });
-
-  it('should close dialog without data on cancel', () => {
-    component.onNoClick();
-    expect(mockDialogRef.close).toHaveBeenCalledWith();
-  });
-
-  it('should close with operator and value on confirm', () => {
-    component.ratingOperator.set(RatingOperatorEnum.GreaterThan);
-    component.ratingValue.set(3);
-    component.onYesClick();
-
-    expect(mockDialogRef.close).toHaveBeenCalledWith({
-      ratingOperator: RatingOperatorEnum.GreaterThan,
-      ratingValue: 3,
-    });
-  });
+  it('should resolve ratings by string item id', () => {
+    fixture.componentRef.setInput('contentRatings', new Map([[2, 4]]));
 
-  it('ratingOperators should include all five value-based operators', () => {
-    const values = component.ratingOperators.map(op => op.value);
-    expect(values).toContain(RatingOperatorEnum.Equals);
-    expect(values).toContain(RatingOperatorEnum.GreaterThan);
-    expect(values).toContain(RatingOperatorEnum.LargerOrEquals);
-    expect(values).toContain(RatingOperatorEnum.LessThan);
-    expect(values).toContain(RatingOperatorEnum.LessOrEquals);
-    expect(component.ratingOperators.length).toBe(5);
+    expect(component.getRating('2')).toBe(4);
+    expect(component.getRating(undefined)).toBe(0);
   });
 });
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.ts
index 5a6f90b..6536fc6 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.ts
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-list.component.ts
@@ -1,30 +1,22 @@
-import { SelectionModel } from '@angular/cdk/collections';
+import type { SelectionModel } from '@angular/cdk/collections';
 import type { OnInit } from '@angular/core';
 import {
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
   Component,
   DestroyRef,
-  Inject,
+  ViewChild,
   inject,
+  input,
   model,
-  ViewChild,
+  output,
+  signal,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { FormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule, type MatButtonToggleChange } from '@angular/material/button-toggle';
+import type { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import {
-  MAT_DIALOG_DATA,
-  MatDialog,
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
@@ -32,918 +24,223 @@ import { MatInputModule } from '@angular/material/input';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
 import type { MatSelectChange } from '@angular/material/select';
 import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import type { MatTableDataSource } from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatDateFnsModule, provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
-import { Router, RouterModule } from '@angular/router';
 import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
-import { zhCN } from 'date-fns/locale';
-
-import type {
-  KnowledgeExerciseFileContent,
-  KnowledgeExercisePrintOption,
-  LearningContent,
-  QuestionBankItemBase,
-  QuestionBankTypeKeys,
-} from '../../../interfaces';
-import {
-  getAllQuestionBankTypes,
-  MY_DATE_FORMATS,
-  convertToQuestionBankItem,
-  convertQuestionBankItemToMarkdown,
-  QuestionBankTypeEnum,
-  RatingOperatorEnum,
-  matchRating,
-} from '../../../interfaces';
-
-interface FilterResult {
-  item: KnowledgeExerciseFileContent;
-  ranking: number;
-}
-
-enum ContentToDisplayEnum {
-  List = 1,
-  Detail = 2,
-  ExtraInfo = 3,
-}
-import {
-  UIService,
-  LearningContentService,
-  LearningRatingService,
-  ratingItemKey,
-} from '../../../services';
-import { FooterComponent } from '../../../shared/footer/footer';
-import { MarkdownContentComponent } from '../../../shared/markdown-content';
-import { fisherYatesShuffle } from '../../../shared/utils/shuffle';
-import { AppPageTitle } from '../../page-title/page-title';
-
+import type { IFilterDefinition } from 'actslib';
+
+import type { KnowledgeExerciseFileContent, LearningContent } from '../../../interfaces';
+import { KNOWLEDGE_FILTER_PROPERTIES } from '../../../interfaces';
+import { ratingItemKey } from '../../../services';
+import { hasActiveFilterDefinition, summarizeFilterDefinition } from '../../../shared/filter-dialog';
+
+/** Menu-label cap before the ellipsis, matching the vocabulary list. */
+const FILTER_MENU_MAX_LENGTH = 40;
+
+const BASE_DISPLAYED_COLUMNS = [
+  'select',
+  'id',
+  'itemtype',
+  'difficulty',
+  'suggestedCompletionTime',
+  'tags',
+  'extraInfo',
+  'rating',
+];
+
+/**
+ * List screen of the knowledge exercises page: toolbar (file selector), the
+ * Fiori-style filter bar (live free text + the single Filter menu), the
+ * quick-selection/exercise menus and the exercise table with paginator/sort.
+ * Purely presentational — the container owns the dataSource, selection model
+ * and all dialog orchestration; this component only renders them and forwards
+ * user interactions as outputs. The paginator/sort wiring onto the shared
+ * MatTableDataSource happens here because the corresponding elements live in
+ * this template.
+ */
 @Component({
   selector: 'app-knowledge-exercises-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     MatToolbarModule,
     FormsModule,
-    ReactiveFormsModule,
     MatFormFieldModule,
     MatSelectModule,
+    MatCheckboxModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatSortModule,
     MatButtonModule,
-    MatButtonToggleModule,
     MatIconModule,
     MatInputModule,
+    MatButtonToggleModule,
+    MatTooltipModule,
     MatMenuModule,
-    MatPaginatorModule,
-    MatTableModule,
-    MatCheckboxModule,
-    MatSnackBarModule,
-    RouterModule,
-    MarkdownContentComponent,
     MatDividerModule,
-    FooterComponent,
-    MatTooltipModule,
-    MatProgressSpinnerModule,
     TranslocoModule,
   ],
   templateUrl: './knowledge-exercises-list.component.html',
   styleUrl: './knowledge-exercises-list.component.scss',
-  host: {
-    class: 'app-main-content',
-  },
 })
 export class KnowledgeExercisesListComponent implements OnInit {
-  // Enum reference for template
-  readonly ContentToDisplay = ContentToDisplayEnum;
-  // Title
-  pageTitle: AppPageTitle = inject(AppPageTitle);
-  // Selected file
-  selectedFile?: LearningContent;
-  allFiles?: LearningContent[];
-  isLoadingContents = true;
-  // Current content ID for rating
-  private currentContentId?: number;
-  // List page
-  contentToDisplay = ContentToDisplayEnum.List;
-  dataSource: MatTableDataSource<KnowledgeExerciseFileContent> = new MatTableDataSource();
-  selection = new SelectionModel<KnowledgeExerciseFileContent>(true, []);
-  paginator?: MatPaginator;
-  private originalData: KnowledgeExerciseFileContent[] = [];
-  @ViewChild(MatPaginator, { static: false }) set content(content: MatPaginator) {
-    if (content) {
-      // initially setter gets called with undefined
-      this.paginator = content;
-      this.dataSource.paginator = this.paginator;
-    }
-  }
-  displayedColumns = [
-    'select',
-    'id',
-    'itemtype',
-    'difficulty',
-    'suggestedCompletionTime',
-    'tags',
-    'extraInfo',
-    'rating',
-  ];
-  // Navigation
-  readonly router = inject(Router);
-  readonly learningContentService = inject(LearningContentService);
-  readonly uiService = inject(UIService);
-  private readonly ratingService = inject(LearningRatingService);
-  // Dialog
-  readonly dialog = inject(MatDialog);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly cdr = inject(ChangeDetectorRef);
-  // Map to store ratings by item ID
-  private contentRatingMap = new Map<number, number>();
-  printSetting: KnowledgeExercisePrintOption = {
-    formTitle: '',
-    printEntryDate: false,
-    printScore: false,
-    printAnswer: false,
-    printHintOfAnswer: false,
-    printID: true,
-    hideLabelOfQuestionType: [],
-    shuffleOptionsInSelection: true,
-  };
-  // Snackbar
-  readonly _snackBar = inject(MatSnackBar);
-  // Detail
-  selectedElementIdx?: number;
-  selectedElement?: QuestionBankItemBase<string>;
-  markdownStr: string = '';
-  answerMarkdownStr: string = '';
-  hintOfAnswerMarkdownStr: string = '';
-  showDetailAnswer = false;
-  showDetailHintOfAnswer = false;
-  // Base URL for resolving relative image paths in the currently-loaded exercise JSON
-  currentImageBaseUrl?: string;
-
-  /** Whether the number of selected elements matches the total number of rows. */
-  isAllSelected() {
-    const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
-    return numSelected === numRows;
-  }
-
-  /** Selects all rows if they are not all selected; otherwise clear selection. */
-  toggleAllRows() {
-    if (this.isAllSelected()) {
-      this.selection.clear();
+  readonly allFiles = input.required<LearningContent[]>();
+  readonly selectedFile = model<LearningContent | undefined>(undefined);
+  readonly isLoadingContents = input.required<boolean>();
+  readonly dataSource = input.required<MatTableDataSource<KnowledgeExerciseFileContent>>();
+  readonly selection = input.required<SelectionModel<KnowledgeExerciseFileContent>>();
+  readonly contentRatings = input.required<Map<number, number>>();
+
+  // ── Filter bar ──────────────────────────────────────────────────
+  // The container owns the applied condition definition (it opens the shared
+  // filter dialog); this child only renders it for the menu label and
+  // forwards intents. freeText is a local field for the input box, emitted
+  // live.
+  readonly filterDefinition = input.required<IFilterDefinition>();
+  /**
+   * Free text currently applied by the container, seeded into the input box
+   * on init. The list screen stays mounted across detail visits (the container
+   * toggles it with [hidden]), so this only matters when the child is created
+   * with a filter already applied by the container — the box must not show
+   * empty while the table is invisibly filtered.
+   */
+  readonly appliedFreeText = input('');
+  readonly freeTextChanged = output<string>();
+  readonly defineFilter = output<void>();
+  readonly clearFilter = output<void>();
+  readonly quickSelect = output<'random' | 'sequence' | 'ids'>();
+  readonly selectAllVisible = output<void>();
+  readonly clearSelection = output<void>();
+
+  readonly allRowsToggled = output<void>();
+  readonly fileSelectionChanged = output<MatSelectChange>();
+  readonly contentRatingChanged = output<{
+    item: KnowledgeExerciseFileContent;
+    event: MatButtonToggleChange;
+  }>();
+  readonly showDetail = output<string>();
+  readonly showExtraInfo = output<string>();
+  readonly print = output<void>();
+
+  /** Stable identities so mat-table's column defs only re-diff on a real flip. */
+  readonly displayedColumns = BASE_DISPLAYED_COLUMNS;
+
+  freeText = '';
+
+  private readonly transloco = inject(TranslocoService);
+
+  /**
+   * True while an IME composition is in progress. Intermediate pinyin
+   * fragments fire `input` events; filtering those would flicker the table
+   * mid-word on a Chinese-content page, so they are suppressed until
+   * compositionend delivers the final text.
+   */
+  private composing = false;
+
+  /** Free text applies live, except mid-composition. */
+  onFreeTextChanged(value: string): void {
+    if (this.composing) {
       return;
     }
-
-    this.selection.select(...this.dataSource.data);
+    this.freeTextChanged.emit(value);
   }
 
-  get itemCount(): number {
-    return this.dataSource.data.length;
+  onCompositionStart(): void {
+    this.composing = true;
   }
 
-  ngOnInit(): void {
-    // Set the page title
-    this.pageTitle.title = 'Exercises';
-    // Fetch knowledge bank contents from the API. The includeLatex flag is carried on
-    // each LearningContent record, so no separate metadata index load is needed.
-    this.learningContentService
-      .getKnowledgeBankContents()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: contents => {
-          this.allFiles = contents;
-          this.isLoadingContents = false;
-          // OnPush: the file list arrives in an async subscribe callback, so
-          // the view is not marked dirty automatically — without this the
-          // files dropdown stays empty until a later DOM event triggers
-          // detection.
-          this.cdr.markForCheck();
-        },
-        error: err => {
-          console.error(err);
-          this.isLoadingContents = false;
-          this.cdr.markForCheck();
-        },
-      });
+  onCompositionEnd(value: string): void {
+    this.composing = false;
+    this.freeTextChanged.emit(value);
   }
 
-  onFileSelectionChanged(event: MatSelectChange) {
-    if (!event.value) {
-      this.originalData = [];
-      this.dataSource.data = [];
-      this.dataSource.paginator = this.paginator || null;
-      this.contentRatingMap.clear();
-      this.currentContentId = undefined;
-      return;
-    }
-
-    const selectedContent = event.value as LearningContent;
-    this.currentContentId = selectedContent.id;
-
-    // Compute the base URL for resolving relative image paths within this JSON file
-    this.currentImageBaseUrl = this.learningContentService.getStorageFileBaseUrl(
-      selectedContent.fileUrl
-    );
-
-    this.dataSource.data = [];
-    this.selection.clear();
-    this.contentRatingMap.clear();
-
-    this.learningContentService
-      .getKnowledgeExerciseContent(selectedContent.fileUrl)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: df => {
-          if (df) {
-            this.originalData = df.slice();
-            this.dataSource.data = df.slice();
-            this.dataSource.paginator = this.paginator || null;
-
-            // Load ratings for this content
-            if (this.currentContentId) {
-              this.ratingService
-                .getRatings(this.currentContentId)
-                .pipe(takeUntilDestroyed(this.destroyRef))
-                .subscribe({
-                  next: ratings => {
-                    for (const r of ratings) {
-                      if (r.itemId !== undefined) {
-                        this.contentRatingMap.set(r.itemId, r.rating);
-                      }
-                    }
-                    // OnPush: ratings arrive async; the mat-table only re-renders
-                    // rows when dataSource emits, so without markForCheck the
-                    // rating column stays at 0 until the next interaction.
-                    this.cdr.markForCheck();
-                  },
-                  error: err => console.error('Failed to load ratings', err),
-                });
-            }
-          }
-        },
-        error: err => {
-          console.error(err);
-        },
-      });
+  get hasFilter(): boolean {
+    return hasActiveFilterDefinition(this.filterDefinition());
   }
 
-  getRating(itemId: string | undefined): number {
-    const numId = ratingItemKey(itemId);
-    return numId === undefined ? 0 : (this.contentRatingMap.get(numId) ?? 0);
-  }
-
-  onContentRatingChanged(item: KnowledgeExerciseFileContent, event: MatButtonToggleChange) {
-    if (event.value === undefined || event.value === null || event.value < 1) {
-      // Clicking the active toggle deselects it (value becomes undefined).
-      // There is no "clear rating" operation, so restore the previous selection.
-      event.source.buttonToggleGroup.value = event.source.value;
-      return;
-    }
-    if (this.currentContentId === undefined || item.id === undefined) {
-      return;
+  /** Condition-definition summary (join words and parentheses included) for the Filter menu item. */
+  get filterMenuLabel(): string {
+    if (!this.hasFilter) {
+      return this.transloco.translate('common.filterNew');
     }
-    const numId = ratingItemKey(item.id);
-    if (numId === undefined) {
-      return;
-    }
-    const previousRating = this.contentRatingMap.get(numId) ?? 0;
-
-    this.ratingService
-      .upsertRating(this.currentContentId, numId, event.value)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: saved => {
-          this.contentRatingMap.set(numId, saved.rating);
-          this.cdr.markForCheck();
-        },
-        error: err => {
-          console.error('Failed to save rating', err);
-          // Restore the previous rating instead of dropping it from the map.
-          this.contentRatingMap.set(numId, previousRating);
-          this.cdr.markForCheck();
-        },
-      });
-  }
-
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    const filterTerms = filterValue
-      .trim()
-      .toLowerCase()
-      .split(/\s+/)
-      .filter(term => term.length > 0);
-
-    if (filterTerms.length === 0) {
-      this.dataSource.data = this.originalData.slice();
-      this.dataSource.paginator = this.paginator || null;
-      return;
-    }
-
-    const results: FilterResult[] = this.originalData
-      .map(item => {
-        const ranking = this.calculateRanking(item, filterTerms);
-        return { item, ranking };
-      })
-      .filter(result => result.ranking > 0);
-
-    results.sort((a, b) => b.ranking - a.ranking);
-
-    this.dataSource.data = results.map(r => r.item);
-    this.dataSource.paginator = this.paginator || null;
-  }
-
-  private calculateRanking(item: KnowledgeExerciseFileContent, filterTerms: string[]): number {
-    let totalRanking = 0;
-
-    const fieldPriorities: Array<{
-      getValue: (i: KnowledgeExerciseFileContent) => string | string[] | undefined;
-      weight: number;
-    }> = [
-      { getValue: i => i.id, weight: 8 },
-      { getValue: i => i.question, weight: 7 },
-      { getValue: i => i.tags, weight: 6 },
-      { getValue: i => this.extractOptionsText(i.options), weight: 5 },
-      { getValue: i => i.answer, weight: 4 },
-      { getValue: i => i.answers?.join(' '), weight: 4 },
-      { getValue: i => i.hintofanswer, weight: 3 },
-      { getValue: i => i.extraInfo?.join(' '), weight: 2 },
-      { getValue: i => this.extractItemsText(i.items), weight: 1 },
-    ];
-
-    for (const term of filterTerms) {
-      let termMatched = false;
-
-      for (const field of fieldPriorities) {
-        const value = field.getValue(item);
-        const textValue = Array.isArray(value)
-          ? value.join(' ').toLowerCase()
-          : value?.toLowerCase() || '';
-
-        if (textValue.includes(term)) {
-          totalRanking += field.weight;
-          termMatched = true;
-          break;
-        }
-      }
-
-      if (termMatched) {
-        totalRanking += 10;
-      }
-    }
-
-    const matchedAllTerms = filterTerms.every(term => {
-      return fieldPriorities.some(field => {
-        const value = field.getValue(item);
-        const textValue = Array.isArray(value)
-          ? value.join(' ').toLowerCase()
-          : value?.toLowerCase() || '';
-        return textValue.includes(term);
-      });
-    });
-
-    if (matchedAllTerms) {
-      totalRanking += 100;
-    }
-
-    return totalRanking;
-  }
-
-  private extractOptionsText(options: { [key: string]: string } | undefined): string {
-    if (!options) {
-      return '';
-    }
-    return Object.values(options).join(' ');
-  }
-
-  private extractItemsText(items: KnowledgeExerciseFileContent[] | undefined): string {
-    if (!items || items.length === 0) {
-      return '';
-    }
-    return items
-      .map(item => {
-        const parts: string[] = [];
-        if (item.question) {
-          parts.push(item.question);
-        }
-        if (item.answer) {
-          parts.push(item.answer);
-        }
-        if (item.answers) {
-          parts.push(...item.answers);
-        }
-        return parts.join(' ');
-      })
-      .join(' ');
-  }
-
-  onShowExtraInfo(elemid: string) {
-    this.selectedElementIdx = this.dataSource.data.findIndex(item => item.id === elemid);
-    if (this.selectedElementIdx !== -1) {
-      // Only switch views once the element is actually found — otherwise the
-      // detail view would open on the stale previously-selected element.
-      this.contentToDisplay = ContentToDisplayEnum.ExtraInfo;
-      this.setSelectedElement();
-    }
-  }
-
-  onShowDetail(elemid: string) {
-    // Show the detail of the element
-    this.selectedElementIdx = this.dataSource.data.findIndex(item => item.id === elemid);
-    if (this.selectedElementIdx !== -1) {
-      this.contentToDisplay = ContentToDisplayEnum.Detail;
-      this.setSelectedElement();
-    }
-  }
-
-  setSelectedElement() {
-    if (this.selectedElementIdx === undefined) {
-      return;
-    }
-    this.selectedElement = convertToQuestionBankItem(this.dataSource.data[this.selectedElementIdx]);
-    const hideLabelOfQuestionType: QuestionBankTypeKeys[] = [
-      QuestionBankTypeEnum.SingleChoice as QuestionBankTypeKeys,
-    ];
-    this.markdownStr = convertQuestionBankItemToMarkdown(
-      this.selectedElement,
-      hideLabelOfQuestionType
+    return summarizeFilterDefinition(
+      this.filterDefinition(),
+      KNOWLEDGE_FILTER_PROPERTIES,
+      { translate: key => this.transloco.translate(key) },
+      FILTER_MENU_MAX_LENGTH
     );
-    this.answerMarkdownStr =
-      this.selectedElement?.getAnswers()?.join(';').replaceAll(' ', '&nbsp;') ?? '';
-    this.hintOfAnswerMarkdownStr = this.buildHintMarkdown(this.selectedElement);
   }
 
-  private buildHintMarkdown(item?: QuestionBankItemBase<string>): string {
-    if (!item) {
-      return '';
-    }
-    // For composite types, format each sub-item's hint with order prefix
-    const items = item.items;
-    if (items && items.length > 0) {
-      const hints = items
-        .filter(subItem => subItem.hasHintOfAnswer())
-        .map(subItem => {
-          const hint = subItem.getHintsOfAnswer();
-          const hintText = hint.length > 0 ? hint[0].hint : '';
-          return `*${subItem.order}*. ${hintText}`;
-        });
-      return hints.join('<br>');
-    }
-    // For simple types, return own hint
-    return item.hintofanswer ? String(item.hintofanswer) : '';
-  }
+  private readonly destroyRef = inject(DestroyRef);
 
-  getExtraInfoMarkdown(): string {
-    if (!this.selectedElement?.extraInfo) {
-      return '';
+  /**
+   * Live mirror of the selection size. The selection model is a shared mutable
+   * object owned by the container: selection changes triggered from
+   * container-side dialog flows (Random, Sequence, By ID, Select All Visible,
+   * Clear) do not change any input reference, so the count is mirrored into a
+   * signal that the template reads instead of poking change detection by hand.
+   */
+  readonly selectionCount = signal(0);
+
+  @ViewChild(MatPaginator, { static: false }) set content(paginator: MatPaginator) {
+    if (paginator) {
+      // initially setter gets called with undefined
+      this.dataSource().paginator = paginator;
     }
-    return Array.isArray(this.selectedElement.extraInfo)
-      ? this.selectedElement.extraInfo.join('\n\n')
-      : String(this.selectedElement.extraInfo);
-  }
-
-  onBackToList() {
-    this.showDetailAnswer = false;
-    this.showDetailHintOfAnswer = false;
-    this.hintOfAnswerMarkdownStr = '';
-    this.contentToDisplay = ContentToDisplayEnum.List;
   }
-
-  onPreviousItem() {
-    if (this.selectedElementIdx === undefined) {
-      return;
+  @ViewChild(MatSort, { static: false }) set contentSort(sort: MatSort) {
+    if (sort) {
+      this.dataSource().sort = sort;
     }
-    this.selectedElementIdx = this.selectedElementIdx - 1;
-    this.setSelectedElement();
-    this.hintOfAnswerMarkdownStr = '';
-    this.showDetailHintOfAnswer = false;
   }
 
-  onNextItem() {
-    if (this.selectedElementIdx === undefined) {
-      return;
-    }
-    this.selectedElementIdx = this.selectedElementIdx + 1;
-    this.setSelectedElement();
-    this.hintOfAnswerMarkdownStr = '';
-    this.showDetailHintOfAnswer = false;
-  }
-
-  onToggleAnswer() {
-    this.showDetailAnswer = !this.showDetailAnswer;
-  }
-  onToggleHintOfAnswer() {
-    this.showDetailHintOfAnswer = !this.showDetailHintOfAnswer;
-  }
-
-  onPreview() {
-    // Show the dailog
-    const dialogRef = this.dialog.open(KnowledgeExercisesPrintOptionsDialogComponent, {
-      data: {
-        defaultTitle: this.selectedFile?.nameChinese || '',
-      },
-      width: '600px',
-      height: '500px',
-      enterAnimationDuration: 800,
-      exitAnimationDuration: 500,
-    });
-
-    dialogRef
-      .afterClosed()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(result => {
-        if (result !== undefined) {
-          this.printSetting.formTitle = result.formTitle;
-          this.printSetting.printEntryDate = result.printEntryDate;
-          this.printSetting.printScore = result.printScore;
-          this.printSetting.printAnswer = result.printAnswer;
-          this.printSetting.printHintOfAnswer = result.printHintOfAnswer;
-          this.printSetting.hideLabelOfQuestionType = result.hideLabelOfQuestionType;
-          this.printSetting.shuffleOptionsInSelection = result.shuffleOptionsInSelection;
-
-          this.onPreviewCore();
-        }
-      });
-  }
-
-  onSelectByCount() {
-    const dialogRef = this.dialog.open(KnowledgeSelectByCountDialogComponent, {
-      data: {},
-      width: '400px',
-      enterAnimationDuration: 800,
-      exitAnimationDuration: 500,
-    });
-
-    dialogRef
-      .afterClosed()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(result => {
-        if (result !== undefined && result.countOfItems > 0) {
-          this.selection.clear();
-          const offset = result.countOfOffset ?? 0;
-          this.dataSource.data.forEach((item, index) => {
-            if (index >= offset && index < offset + result.countOfItems) {
-              this.selection.select(item);
-            }
-          });
-          // OnPush: the count-based selection is applied in the async
-          // afterClosed callback — without markForCheck the checkboxes would
-          // not reflect the new selection until a later DOM event.
-          this.cdr.markForCheck();
-        }
-      });
-  }
-
-  onSelectByID() {
-    const dialogRef = this.dialog.open(KnowledgeSelectByIDDialogComponent, {
-      data: {},
-      width: '500px',
-      enterAnimationDuration: 800,
-      exitAnimationDuration: 500,
-    });
-
-    dialogRef
-      .afterClosed()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(result => {
-        if (result !== undefined && result.importIDs) {
-          // Split by the ','
-          const arids = result.importIDs.split(',');
-          if (arids.length > 0) {
-            this.selection.clear();
-            this.dataSource.data.forEach(item => {
-              const selidx = arids.findIndex((idstr: string) => idstr.trim() === item.id);
-              if (selidx !== -1) {
-                this.selection.select(item);
-              }
-            });
-            this.cdr.markForCheck();
-          }
-        }
-      });
-  }
-
-  onSelectFreeSelection() {
-    const dialogRef = this.dialog.open(KnowledgeSelectFreeDialogComponent, {
-      data: {},
-      width: '400px',
-      enterAnimationDuration: 800,
-      exitAnimationDuration: 500,
-    });
-
-    dialogRef
-      .afterClosed()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(result => {
-        if (result !== undefined && result.countOfItems > 0) {
-          // Random select
-          this.selection.clear();
-
-          let narr: KnowledgeExerciseFileContent[] = [];
-          if (result.filterOnTag) {
-            // Filter by tag
-            narr = this.dataSource.data.filter(
-              item =>
-                item.tags &&
-                item.tags.some(
-                  tag => tag.toLowerCase().indexOf(result.filterOnTag.toLowerCase()) !== -1
-                )
-            );
-            narr = fisherYatesShuffle(narr);
-          } else {
-            narr = fisherYatesShuffle(this.dataSource.data);
-          }
-
-          narr.forEach((item, index) => {
-            if (index < result.countOfItems) {
-              this.selection.select(item);
-            }
-          });
-          this.cdr.markForCheck();
-        }
-      });
-  }
-
-  onSelectByRating() {
-    const dialogRef = this.dialog.open(KnowledgeSelectByRatingDialogComponent, {
-      data: {},
-      width: '400px',
-      enterAnimationDuration: 800,
-      exitAnimationDuration: 500,
-    });
-
-    dialogRef
-      .afterClosed()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(result => {
-        if (result !== undefined) {
-          this.selection.clear();
-          const operator = result.ratingOperator as RatingOperatorEnum;
-          const value = result.ratingValue as number;
-
-          this.dataSource.data.forEach(item => {
-            const rating = this.getRating(item.id);
-            const matches = matchRating(rating, operator, value);
-
-            if (matches) {
-              this.selection.select(item);
-            }
-          });
-          this.cdr.markForCheck();
-        }
-      });
-  }
-
-  private onPreviewCore() {
-    const narr = this.selection.selected.slice();
-    narr.forEach((item, index) => {
-      item.order = index + 1;
-
-      // For reading comprehension, listening comprehension and cloze
-      // They have sub items
-      if (item.items && item.items.length > 0) {
-        item.items.forEach((sbitem, sbindex) => {
-          sbitem.order = sbindex + 1;
-        });
-      }
-    });
-
-    this.uiService.setSelectedExerciseItem(
-      narr,
-      this.printSetting,
-      this.selectedFile?.includeLatex ?? false,
-      this.currentImageBaseUrl
-    );
-    void this.router.navigate(['/knowledge/displayv2']);
-  }
-}
-
-@Component({
-  selector: 'app-knowledge-exercises-printoptions-dlg',
-  templateUrl: 'knowledge-exercises-printoptions-dlg.html',
-  imports: [
-    MatFormFieldModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatCheckboxModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatSelectModule,
-    MatRadioModule,
-    MatDatepickerModule,
-    MatDateFnsModule,
-    TranslocoModule,
-  ],
-  providers: [
-    provideDateFnsAdapter(),
-    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
-    { provide: MAT_DATE_LOCALE, useValue: zhCN },
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KnowledgeExercisesPrintOptionsDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<KnowledgeExercisesPrintOptionsDialogComponent>);
-  private readonly _snackBar = inject(MatSnackBar);
-  readonly transloco = inject(TranslocoService);
-
-  allQuestionBankTypes = getAllQuestionBankTypes();
-  readonly formTitle = model('');
-  readonly printEntryDate = model(true);
-  readonly printScore = model(true);
-  readonly printAnswer = model(true);
-  readonly printHintOfAnswer = model(false);
-  readonly printID = model(true);
-  readonly hideLabelOfQuestionType = model([]);
-  readonly shuffleOptionsInSelection = model(false);
-
-  constructor(@Inject(MAT_DIALOG_DATA) public data: { defaultTitle: string }) {
-    this.formTitle.set(data.defaultTitle);
-  }
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-  onYesClick(): void {
-    if (this.formTitle().trim() === '') {
-      this._snackBar.open(
-        this.transloco.translate('required_field'),
-        this.transloco.translate('close'),
-        {
-          duration: 3000,
-        }
-      );
-      return;
-    }
-
-    const closedata: KnowledgeExercisePrintOption = {
-      formTitle: this.formTitle(),
-      printEntryDate: this.printEntryDate(),
-      printScore: this.printScore(),
-      printAnswer: this.printAnswer(),
-      printHintOfAnswer: this.printHintOfAnswer(),
-      printID: this.printID(),
-      hideLabelOfQuestionType: this.hideLabelOfQuestionType(),
-      shuffleOptionsInSelection: this.shuffleOptionsInSelection(),
-    };
-
-    this.dialogRef.close(closedata);
-  }
-}
-
-@Component({
-  selector: 'app-knowledge-selectbycount-dlg',
-  templateUrl: 'knowledge-exercises-selectbycount-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    FormsModule,
-    MatInputModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    TranslocoModule,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KnowledgeSelectByCountDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<KnowledgeSelectByCountDialogComponent>);
-  readonly countOfItems = model(20);
-  readonly countOfOffset = model(0);
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-  get isFormInvalid(): boolean {
-    return this.countOfItems() <= 0 || (this.countOfOffset() ?? 0) < 0;
-  }
-
-  onYesClick(): void {
-    this.dialogRef.close({
-      countOfItems: this.countOfItems(),
-      countOfOffset: this.countOfOffset(),
-    });
-  }
-}
-
-@Component({
-  selector: 'app-knowledge-selectbyid-dlg',
-  templateUrl: 'knowledge-exercises-selectbyid-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    FormsModule,
-    MatInputModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    TranslocoModule,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KnowledgeSelectByIDDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<KnowledgeSelectByIDDialogComponent>);
-  readonly importIDs = model('');
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-  get isFormInvalid(): boolean {
-    return this.importIDs().trim().length <= 0;
-  }
-
-  onYesClick(): void {
-    this.dialogRef.close({
-      importIDs: this.importIDs(),
-    });
-  }
-}
-
-@Component({
-  selector: 'app-knowledge-selectfree-dlg',
-  templateUrl: 'knowledge-exercises-selectfree-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    FormsModule,
-    MatInputModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    TranslocoModule,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KnowledgeSelectFreeDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<KnowledgeSelectFreeDialogComponent>);
-  readonly countOfItems = model(20);
-  readonly filterOnTag = model('');
+  ngOnInit(): void {
+    // Restore the filter box to what the container has applied; a fresh
+    // instance starts empty otherwise.
+    this.freeText = this.appliedFreeText();
 
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
+    // Seed the count from the live selection: the shared SelectionModel may
+    // already hold rows checked before this child was created (e.g. container
+    // dialog flows), but the selection.changed subscription only fires on the
+    // *next* change — so without this seed the toolbar shows 0 while
+    // checkboxes are visibly checked.
+    this.selectionCount.set(this.selection().selected.length);
 
-  get isFormInvalid(): boolean {
-    return this.countOfItems() <= 0;
+    this.selection()
+      .changed.pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.selectionCount.set(this.selection().selected.length));
   }
 
-  onYesClick(): void {
-    this.dialogRef.close({
-      countOfItems: this.countOfItems(),
-      filterOnTag: this.filterOnTag(),
-    });
+  get wordQueueCount(): number {
+    return this.dataSource().data.length;
   }
-}
 
-@Component({
-  selector: 'app-knowledge-selectbyrating-dlg',
-  templateUrl: 'knowledge-exercises-selectbyrating-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    FormsModule,
-    MatInputModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatSelectModule,
-    TranslocoModule,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class KnowledgeSelectByRatingDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<KnowledgeSelectByRatingDialogComponent>);
-  readonly ratingOperator = model(RatingOperatorEnum.Equals);
-  readonly ratingValue = model(3);
-
-  get ratingOperators(): { value: RatingOperatorEnum; label: string }[] {
-    return [
-      { value: RatingOperatorEnum.Equals, label: 'operatorEquals' },
-      { value: RatingOperatorEnum.GreaterThan, label: 'operatorGreaterThan' },
-      { value: RatingOperatorEnum.LargerOrEquals, label: 'operatorLargerOrEquals' },
-      { value: RatingOperatorEnum.LessThan, label: 'operatorLessThan' },
-      { value: RatingOperatorEnum.LessOrEquals, label: 'operatorLessOrEquals' },
-    ];
+  /** Rows the table currently shows: the filtered count when a filter is active. */
+  get visibleRowCount(): number {
+    return this.dataSource().filter
+      ? this.dataSource().filteredData.length
+      : this.dataSource().data.length;
   }
 
-  get ratingValues(): number[] {
-    return [1, 2, 3, 4, 5];
+  /**
+   * Whether every visible row is selected. Comparing against the visible rows
+   * (not just counts) keeps the header checkbox honest when the selection also
+   * contains rows the current filter hides — mirroring the container's
+   * isAllSelected/toggleAllRows semantics.
+   */
+  isAllSelected(): boolean {
+    const source = this.dataSource();
+    const visible = source.filter ? source.filteredData : source.data;
+    return visible.length > 0 && visible.every(row => this.selection().isSelected(row));
   }
 
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-  onYesClick(): void {
-    this.dialogRef.close({
-      ratingOperator: this.ratingOperator(),
-      ratingValue: this.ratingValue(),
-    });
+  getRating(itemId: string | number | undefined): number {
+    const numId = ratingItemKey(itemId);
+    return numId === undefined ? 0 : (this.contentRatings().get(numId) ?? 0);
   }
 }
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dialog.component.spec.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dialog.component.spec.ts
new file mode 100644
index 0000000..d645e09
--- /dev/null
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dialog.component.spec.ts
@@ -0,0 +1,133 @@
+import type { ComponentFixture} from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+} from '@jsverse/transloco';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import { KnowledgeExercisesPrintOptionsDialogComponent } from './knowledge-exercises-printoptions-dialog.component';
+
+function mockTranslocoService() {
+  return {
+    setActiveLang: vi.fn(),
+    getActiveLang: vi.fn(),
+    selectTranslate: vi.fn().mockReturnValue(of('')),
+    _loadDependencies: vi.fn().mockReturnValue(of(null)),
+    translate: vi.fn((key: string) => key),
+    activeLang: 'en',
+    config: { reRenderOnLangChange: true, prodMode: false },
+    langChanges$: of('en'),
+    events$: of(),
+  };
+}
+
+describe('KnowledgeExercisesPrintOptionsDialogComponent', () => {
+  let component: KnowledgeExercisesPrintOptionsDialogComponent;
+  let fixture: ComponentFixture<KnowledgeExercisesPrintOptionsDialogComponent>;
+  let mockDialogRef: any;
+  let mockSnackBar: any;
+
+  beforeEach(async () => {
+    const dialogRefSpy = { close: vi.fn() };
+    const snackBarSpy = { open: vi.fn() };
+
+    await TestBed.configureTestingModule({
+      imports: [KnowledgeExercisesPrintOptionsDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: { defaultTitle: 'Test Title' } },
+        { provide: MatDialogRef, useValue: dialogRefSpy },
+        { provide: MatSnackBar, useValue: snackBarSpy },
+        { provide: TranslocoService, useValue: mockTranslocoService() },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(KnowledgeExercisesPrintOptionsDialogComponent);
+    component = fixture.componentInstance;
+    mockDialogRef = TestBed.inject(MatDialogRef) as any;
+    mockSnackBar = TestBed.inject(MatSnackBar) as any;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initialize with default title', () => {
+    expect(component.formTitle()).toBe('Test Title');
+  });
+
+  it('should close dialog without data when onNoClick called', () => {
+    component.onNoClick();
+
+    expect(mockDialogRef.close).toHaveBeenCalledWith();
+  });
+
+  it('should show error when form title is empty on submit', () => {
+    component.formTitle.set('');
+
+    component.onYesClick();
+
+    expect(mockSnackBar.open).toHaveBeenCalledWith('required_field', 'close', {
+      duration: 3000,
+    });
+    expect(mockDialogRef.close).not.toHaveBeenCalled();
+  });
+
+  it('should show error when form title is whitespace only', () => {
+    component.formTitle.set('   ');
+
+    component.onYesClick();
+
+    expect(mockSnackBar.open).toHaveBeenCalledWith('required_field', 'close', {
+      duration: 3000,
+    });
+    expect(mockDialogRef.close).not.toHaveBeenCalled();
+  });
+
+  it('should close with print options data when form is valid', () => {
+    component.formTitle.set('Valid Title');
+    component.printEntryDate.set(true);
+    component.printScore.set(false);
+
+    component.onYesClick();
+
+    expect(mockDialogRef.close).toHaveBeenCalledWith(
+      expect.objectContaining({
+        formTitle: 'Valid Title',
+        printEntryDate: true,
+        printScore: false,
+      })
+    );
+  });
+
+  it('should include all form fields in close data', () => {
+    component.formTitle.set('Complete Form');
+    component.printEntryDate.set(true);
+    component.printScore.set(false);
+    component.printAnswer.set(true);
+    component.printHintOfAnswer.set(false);
+    component.printID.set(true);
+    component.hideLabelOfQuestionType.set(['MultipleChoice'] as any);
+    component.shuffleOptionsInSelection.set(true);
+
+    component.onYesClick();
+
+    expect(mockDialogRef.close).toHaveBeenCalledWith({
+      formTitle: 'Complete Form',
+      printEntryDate: true,
+      printScore: false,
+      printAnswer: true,
+      printHintOfAnswer: false,
+      printID: true,
+      hideLabelOfQuestionType: ['MultipleChoice'],
+      shuffleOptionsInSelection: true,
+    });
+  });
+});
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dialog.component.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dialog.component.ts
new file mode 100644
index 0000000..9454510
--- /dev/null
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dialog.component.ts
@@ -0,0 +1,101 @@
+import { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
+import { MatDateFnsModule, provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
+import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import { zhCN } from 'date-fns/locale';
+
+import type { KnowledgeExercisePrintOption } from '../../../interfaces';
+import { MY_DATE_FORMATS, getAllQuestionBankTypes } from '../../../interfaces';
+
+@Component({
+  selector: 'app-knowledge-exercises-printoptions-dlg',
+  templateUrl: 'knowledge-exercises-printoptions-dlg.html',
+  imports: [
+    MatFormFieldModule,
+    FormsModule,
+    ReactiveFormsModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatSelectModule,
+    MatRadioModule,
+    MatDatepickerModule,
+    MatDateFnsModule,
+    TranslocoModule,
+  ],
+  providers: [
+    provideDateFnsAdapter(),
+    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
+    { provide: MAT_DATE_LOCALE, useValue: zhCN },
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KnowledgeExercisesPrintOptionsDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<KnowledgeExercisesPrintOptionsDialogComponent>);
+  private readonly _snackBar = inject(MatSnackBar);
+  readonly transloco = inject(TranslocoService);
+
+  allQuestionBankTypes = getAllQuestionBankTypes();
+  readonly formTitle = model('');
+  readonly printEntryDate = model(true);
+  readonly printScore = model(true);
+  readonly printAnswer = model(true);
+  readonly printHintOfAnswer = model(false);
+  readonly printID = model(true);
+  readonly hideLabelOfQuestionType = model([]);
+  readonly shuffleOptionsInSelection = model(false);
+
+  constructor() {
+    const data = inject<{ defaultTitle: string }>(MAT_DIALOG_DATA);
+    this.formTitle.set(data.defaultTitle);
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onYesClick(): void {
+    if (this.formTitle().trim() === '') {
+      this._snackBar.open(
+        this.transloco.translate('required_field'),
+        this.transloco.translate('close'),
+        {
+          duration: 3000,
+        }
+      );
+      return;
+    }
+
+    const closedata: KnowledgeExercisePrintOption = {
+      formTitle: this.formTitle(),
+      printEntryDate: this.printEntryDate(),
+      printScore: this.printScore(),
+      printAnswer: this.printAnswer(),
+      printHintOfAnswer: this.printHintOfAnswer(),
+      printID: this.printID(),
+      hideLabelOfQuestionType: this.hideLabelOfQuestionType(),
+      shuffleOptionsInSelection: this.shuffleOptionsInSelection(),
+    };
+
+    this.dialogRef.close(closedata);
+  }
+}
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dlg.html b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dlg.html
index 750b7f5..80e10b5 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dlg.html
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-printoptions-dlg.html
@@ -2,7 +2,7 @@
   <h2 mat-dialog-title>{{ t('knowledgeExercises.optionsOfKnowledgeExercises') }}</h2>
   <mat-dialog-content class="control-full-width">
     <mat-form-field class="control-full-width">
-      <mat-label>{{ t('knowledgeExercises.titleOption') }}</mat-label>
+      <mat-label>{{ t('common.title') }}</mat-label>
       <input matInput type="text" [(ngModel)]="formTitle" name="formTitle">
     </mat-form-field>
 
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.component.spec.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.component.spec.ts
new file mode 100644
index 0000000..8811baa
--- /dev/null
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.component.spec.ts
@@ -0,0 +1,130 @@
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import type { ComponentFixture} from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+} from '@jsverse/transloco';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import { SelectionModeEnum } from '../../../interfaces';
+
+import { KnowledgeExercisesSelectDialogComponent } from './knowledge-exercises-select-dialog.component';
+
+function mockTranslocoService() {
+  return {
+    setActiveLang: vi.fn(),
+    getActiveLang: vi.fn(),
+    selectTranslate: vi.fn().mockReturnValue(of('')),
+    _loadDependencies: vi.fn().mockReturnValue(of(null)),
+    translate: vi.fn((key: string) => key),
+    activeLang: 'en',
+    config: { reRenderOnLangChange: true, prodMode: false },
+    langChanges$: of('en'),
+    events$: of(),
+  };
+}
+
+describe('KnowledgeExercisesSelectDialogComponent', () => {
+  let fixture: ComponentFixture<KnowledgeExercisesSelectDialogComponent>;
+  let closeSpy: ReturnType<typeof vi.fn>;
+
+  async function createWith(data: {
+    mode: SelectionModeEnum;
+    rowCount?: number;
+    visibleIds?: string[];
+  }) {
+    closeSpy = vi.fn();
+    await TestBed.configureTestingModule({
+      imports: [KnowledgeExercisesSelectDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: data },
+        { provide: MatDialogRef, useValue: { close: closeSpy } },
+        { provide: TranslocoService, useValue: mockTranslocoService() },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents();
+    fixture = TestBed.createComponent(KnowledgeExercisesSelectDialogComponent);
+  }
+
+  it('random (Free Selection) closes returning only a count', async () => {
+    await createWith({ mode: SelectionModeEnum.FreeSelection });
+    fixture.componentInstance.countOfItems.set(7);
+    fixture.componentInstance.onYesClick();
+    expect(closeSpy).toHaveBeenCalledWith({
+      selectedSelectMode: SelectionModeEnum.FreeSelection,
+      countOfItems: 7,
+    });
+  });
+
+  it('sequence (By Count) closes returning count and offset', async () => {
+    await createWith({ mode: SelectionModeEnum.ByCount, rowCount: 20 });
+    fixture.componentInstance.countOfItems.set(5);
+    fixture.componentInstance.countOfOffset.set(3);
+    fixture.componentInstance.onYesClick();
+    expect(closeSpy).toHaveBeenCalledWith({
+      selectedSelectMode: SelectionModeEnum.ByCount,
+      countOfItems: 5,
+      countOfOffset: 3,
+    });
+  });
+
+  it('isFormInvalid rejects a non-positive count', async () => {
+    await createWith({ mode: SelectionModeEnum.FreeSelection });
+    fixture.componentInstance.countOfItems.set(0);
+    expect(fixture.componentInstance.isFormInvalid).toBe(true);
+
+    fixture.componentInstance.countOfItems.set(1);
+    expect(fixture.componentInstance.isFormInvalid).toBe(false);
+  });
+
+  it('isFormInvalid rejects a By Count offset at or beyond rowCount', async () => {
+    await createWith({ mode: SelectionModeEnum.ByCount, rowCount: 10 });
+    fixture.componentInstance.countOfItems.set(2);
+    fixture.componentInstance.countOfOffset.set(10);
+    expect(fixture.componentInstance.isFormInvalid).toBe(true);
+
+    fixture.componentInstance.countOfOffset.set(9);
+    expect(fixture.componentInstance.isFormInvalid).toBe(false);
+  });
+
+  it('ids (ByID) closes returning a clean comma-joined list', async () => {
+    await createWith({ mode: SelectionModeEnum.ByID, visibleIds: ['1', '2', '3'] });
+    fixture.componentInstance.importIDs.set('1\n3,,2');
+    fixture.componentInstance.onYesClick();
+    expect(closeSpy).toHaveBeenCalledWith({
+      selectedSelectMode: SelectionModeEnum.ByID,
+      importIDs: '1,3,2',
+    });
+  });
+
+  it('isFormInvalid rejects empty, separator-only or non-matching ByID input', async () => {
+    await createWith({ mode: SelectionModeEnum.ByID, visibleIds: ['1', '2'] });
+
+    fixture.componentInstance.importIDs.set('');
+    expect(fixture.componentInstance.isFormInvalid).toBe(true);
+
+    fixture.componentInstance.importIDs.set(',,,');
+    expect(fixture.componentInstance.isFormInvalid).toBe(true);
+
+    fixture.componentInstance.importIDs.set('8, 9');
+    expect(fixture.componentInstance.isFormInvalid).toBe(true);
+
+    fixture.componentInstance.importIDs.set('8, 2');
+    expect(fixture.componentInstance.isFormInvalid).toBe(false);
+  });
+
+  it('onNoClick closes with undefined (selection untouched)', async () => {
+    await createWith({ mode: SelectionModeEnum.FreeSelection });
+    fixture.componentInstance.onNoClick();
+    expect(closeSpy).toHaveBeenCalledWith();
+  });
+});
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.component.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.component.ts
new file mode 100644
index 0000000..8f13950
--- /dev/null
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.component.ts
@@ -0,0 +1,143 @@
+import { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import type { VocabularySelectOption } from '../../../interfaces';
+import { SelectionModeEnum } from '../../../interfaces';
+
+@Component({
+  selector: 'app-knowledge-exercises-select-dlg',
+  templateUrl: 'knowledge-exercises-select-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    FormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    TranslocoModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class KnowledgeExercisesSelectDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<KnowledgeExercisesSelectDialogComponent>);
+  /** Exposes SelectionModeEnum to the template for @switch on data.mode. */
+  readonly SelectionMode = SelectionModeEnum;
+  readonly data = inject<SelectDialogData>(MAT_DIALOG_DATA);
+
+  // By Count / Free Selection
+  readonly countOfItems = model(20);
+  readonly countOfOffset = model(0);
+  // By ID
+  readonly importIDs = model('');
+
+  get titleKey(): string {
+    // Dialog titles match the Quick Selection menu items that open them.
+    switch (this.data.mode) {
+      case SelectionModeEnum.ByID:
+        return 'knowledgeExercises.selectIds';
+      case SelectionModeEnum.FreeSelection:
+        return 'common.randomSelect';
+      case SelectionModeEnum.ByCount:
+        return 'common.sequenceSelect';
+      default:
+        return 'common.sequenceSelect';
+    }
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  /**
+   * Split the By ID input on commas and/or newlines and drop empties. A
+   * `rows="5"` textarea invites newline-separated pastes; normalizing here
+   * (and again in the container, defense-in-depth) makes any separator work.
+   */
+  private parseIdTokens(): string[] {
+    return this.importIDs()
+      .split(/[\n\r,]+/)
+      .map(t => t.trim())
+      .filter(t => t.length > 0);
+  }
+
+  /** True if at least one typed token matches a visible item. When no id list
+   *  was supplied (legacy/programmatic callers), skip this check and let the
+   *  container's own no-match guard handle it. */
+  private hasMatchingToken(): boolean {
+    const ids = this.data.visibleIds;
+    if (!ids || ids.length === 0) {
+      return true;
+    }
+    const set = new Set(ids);
+    return this.parseIdTokens().some(t => set.has(t));
+  }
+
+  get isFormInvalid(): boolean {
+    switch (this.data.mode) {
+      case SelectionModeEnum.ByCount: {
+        // Require an integer count >= 1 and an integer offset in [0, rowCount)
+        // so an out-of-range offset can't silently wipe the selection.
+        const count = this.countOfItems();
+        const offset = this.countOfOffset() ?? 0;
+        const rowCount = this.data.rowCount;
+        const countInvalid = !Number.isInteger(count) || count < 1;
+        const offsetInvalid =
+          !Number.isInteger(offset) ||
+          offset < 0 ||
+          (rowCount !== undefined && offset >= rowCount);
+        return countInvalid || offsetInvalid;
+      }
+      case SelectionModeEnum.FreeSelection:
+        return !Number.isInteger(this.countOfItems()) || this.countOfItems() < 1;
+      case SelectionModeEnum.ByID:
+        // Empty input, separator-only input (e.g. ",,,"), or no matching token
+        // all disable OK so a no-match paste can't clear the selection.
+        return this.parseIdTokens().length === 0 || !this.hasMatchingToken();
+      default:
+        return false;
+    }
+  }
+
+  onYesClick(): void {
+    const result: VocabularySelectOption = { selectedSelectMode: this.data.mode };
+    switch (this.data.mode) {
+      case SelectionModeEnum.ByCount: {
+        // Clamp count/offset to safe integers as defense-in-depth.
+        const rowCount = this.data.rowCount;
+        const offset = Math.max(0, Math.floor(this.countOfOffset() ?? 0));
+        result.countOfItems = Math.max(1, Math.floor(this.countOfItems() ?? 1));
+        result.countOfOffset =
+          rowCount !== undefined ? Math.min(offset, Math.max(0, rowCount - 1)) : offset;
+        break;
+      }
+      case SelectionModeEnum.FreeSelection:
+        result.countOfItems = Math.max(1, Math.floor(this.countOfItems() ?? 1));
+        break;
+      case SelectionModeEnum.ByID:
+        // Return a clean comma-joined list regardless of how it was pasted.
+        result.importIDs = this.parseIdTokens().join(',');
+        break;
+    }
+    this.dialogRef.close(result);
+  }
+}
+
+/** Dialog data: `mode` is always required; `rowCount` bounds By Count's offset
+ *  and `visibleIds` lets By ID validate at least one match. */
+interface SelectDialogData {
+  mode: SelectionModeEnum;
+  rowCount?: number;
+  visibleIds?: string[];
+}
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.html b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.html
new file mode 100644
index 0000000..cc4ecf1
--- /dev/null
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-select-dialog.html
@@ -0,0 +1,33 @@
+<div *transloco="let t">
+  <h2 mat-dialog-title>{{ t(titleKey) }}</h2>
+  <mat-dialog-content class="control-full-width">
+    @switch (data.mode) {
+      @case (SelectionMode.ByCount) {
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('countOfSelection') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="countOfItems" min="1" />
+        </mat-form-field>
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('countOfOffset') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="countOfOffset" min="0" />
+        </mat-form-field>
+      }
+      @case (SelectionMode.ByID) {
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('knowledgeExercises.idsSplitter') }}</mat-label>
+          <textarea matInput rows="5" [(ngModel)]="importIDs"></textarea>
+        </mat-form-field>
+      }
+      @case (SelectionMode.FreeSelection) {
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('countOfSelection') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="countOfItems" min="1" />
+        </mat-form-field>
+      }
+    }
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
+    <button mat-button (click)="onYesClick()" [disabled]="isFormInvalid">{{ t('ok') }}</button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbycount-dialog.html b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbycount-dialog.html
deleted file mode 100644
index 2aaf563..0000000
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbycount-dialog.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('knowledgeExercises.selectByCount') }}</h2>
-  <mat-dialog-content class="control-full-width">
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('countOfSelection') }}</mat-label>
-      <input matInput type="number" [(ngModel)]="countOfItems" min="1" />
-    </mat-form-field>
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('countOfOffset') }}</mat-label>
-      <input matInput type="number" [(ngModel)]="countOfOffset" min="0" />
-    </mat-form-field>
-  </mat-dialog-content>
-  <mat-dialog-actions>
-    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
-    <button mat-button (click)="onYesClick()" [disabled]="isFormInvalid">{{ t('ok') }}</button>
-  </mat-dialog-actions>
-</div>
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyid-dialog.html b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyid-dialog.html
deleted file mode 100644
index ed92636..0000000
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyid-dialog.html
+++ /dev/null
@@ -1,13 +0,0 @@
-<div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('knowledgeExercises.selectByID') }}</h2>
-  <mat-dialog-content class="control-full-width">
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('knowledgeExercises.idsSplitter') }}</mat-label>
-      <textarea matInput rows="5" [(ngModel)]="importIDs" placeholder="IDs"></textarea>
-    </mat-form-field>
-  </mat-dialog-content>
-  <mat-dialog-actions>
-    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
-    <button mat-button (click)="onYesClick()" [disabled]="isFormInvalid">{{ t('ok') }}</button>
-  </mat-dialog-actions>
-</div>
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyrating-dialog.html b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyrating-dialog.html
deleted file mode 100644
index 6f0a461..0000000
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectbyrating-dialog.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('selectByRating') }}</h2>
-  <mat-dialog-content class="control-full-width">
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('selection.ratingOperator') }}</mat-label>
-      <mat-select [(ngModel)]="ratingOperator">
-        @for (op of ratingOperators; track op.value) {
-          <mat-option [value]="op.value">{{ t('selection.' + op.label) }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('selection.ratingValue') }}</mat-label>
-      <mat-select [(ngModel)]="ratingValue">
-        @for (val of ratingValues; track val) {
-          <mat-option [value]="val">{{ val }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-  </mat-dialog-content>
-  <mat-dialog-actions>
-    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
-    <button mat-button (click)="onYesClick()">{{ t('ok') }}</button>
-  </mat-dialog-actions>
-</div>
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectfree-dialog.html b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectfree-dialog.html
deleted file mode 100644
index 88d04fb..0000000
--- a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises-selectfree-dialog.html
+++ /dev/null
@@ -1,17 +0,0 @@
-<div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('knowledgeExercises.selectFree') }}</h2>
-  <mat-dialog-content class="control-full-width">
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('countOfSelection') }}</mat-label>
-      <input matInput type="number" [(ngModel)]="countOfItems" min="1" />
-    </mat-form-field>
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('knowledgeExercises.filterOnTags') }}</mat-label>
-      <input matInput type="text" [(ngModel)]="filterOnTag" placeholder="Filter" />
-    </mat-form-field>
-  </mat-dialog-content>
-  <mat-dialog-actions>
-    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
-    <button mat-button (click)="onYesClick()" [disabled]="isFormInvalid">{{ t('ok') }}</button>
-  </mat-dialog-actions>
-</div>
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.html b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.html
new file mode 100644
index 0000000..8d3e6a6
--- /dev/null
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.html
@@ -0,0 +1,121 @@
+<main focusOnNavigation aria-label="Knowledge Bank" class="knowledge-exercises-page" *transloco="let t">
+  <div class="knowledge-exercises-page-content">
+    <!-- The list screen stays mounted (toggled via [hidden]) so its
+         paginator page/size and sort survive a detail round-trip; the
+         detail/extra-info screens are rendered on demand. -->
+    @if (mode() === 'detail') {
+        <mat-toolbar class="container">
+          <mat-toolbar-row>
+            <span>
+              <h5>{{ t('knowledge_bank') }} {{ t('knowledgeExercises.detail') }}</h5>
+            </span>
+            <span class="toolbar-spacer"></span>
+            <section style="padding-left: 8px;">
+              <button mat-fab [matTooltip]="t('common.previous')" (click)="onPreviousItem()"
+                [disabled]="(selectedElementIdx ?? -1) <= 0">
+                <mat-icon color="primary">arrow_left</mat-icon>
+              </button>
+              <span>{{selectedElement?.id}}</span>
+              <button mat-fab [matTooltip]="t('common.next')" (click)="onNextItem()"
+                [disabled]="(selectedElementIdx ?? 0) >= visibleRowCount - 1">
+                <mat-icon color="primary">arrow_right</mat-icon>
+              </button>
+            </section>
+            <span class="toolbar-spacer"></span>
+            <section style="padding-left: 8px;">
+              <div class="example-button-container">
+                <button mat-fab extended [matTooltip]="t('toggleAnswer')" (click)="onToggleAnswer()"
+                  [disabled]="!selectedElement?.hasAnswer">
+                  {{ t('toggleAnswer') }}
+                </button>
+                <button mat-fab extended [matTooltip]="t('knowledgeExercises.toggleHintOfAnswer')"
+                  (click)="onToggleHintOfAnswer()" [disabled]="!selectedElement?.hasHintOfAnswer()">
+                  {{ t('knowledgeExercises.toggleHintOfAnswer') }}
+                </button>
+                <button mat-fab [matTooltip]="t('backToList')" (click)="onBackToList()">
+                  <mat-icon>door_back</mat-icon>
+                </button>
+              </div>
+            </section>
+          </mat-toolbar-row>
+        </mat-toolbar>
+        <div class="container knowledge-exercises-detail-view">
+          <app-markdown-content [markdown]="markdownStr" [enableMath]="false" [imageBaseUrl]="currentImageBaseUrl"></app-markdown-content>
+        </div>
+        @if (showDetailAnswer) {
+          <div class="container knowledge-exercises-detail-view">
+            <mat-divider></mat-divider>
+            {{ t('knowledgeExercises.answer') }}:
+            <br />
+            <app-markdown-content [markdown]="answerMarkdownStr" [enableMath]="false" [imageBaseUrl]="currentImageBaseUrl"></app-markdown-content>
+          </div>
+        }
+        @if (showDetailHintOfAnswer) {
+          <div class="container knowledge-exercises-detail-view">
+            <mat-divider></mat-divider>
+            {{ t('hint') }}:
+            <br />
+            <app-markdown-content [markdown]="hintOfAnswerMarkdownStr" [enableMath]="false" [imageBaseUrl]="currentImageBaseUrl"></app-markdown-content>
+          </div>
+        }
+    }
+    @if (mode() === 'extrainfo') {
+        <mat-toolbar class="container">
+          <mat-toolbar-row>
+            <span>
+              <h5>{{ t('knowledge_bank') }} {{ t('common.extraInfo') }}</h5>
+            </span>
+            <span class="toolbar-spacer"></span>
+            <section style="padding-left: 8px;">
+              <button mat-fab [matTooltip]="t('common.previous')" (click)="onPreviousItem()"
+                [disabled]="(selectedElementIdx ?? -1) <= 0">
+                <mat-icon color="primary">arrow_left</mat-icon>
+              </button>
+              <span>{{selectedElement?.id}}</span>
+              <button mat-fab [matTooltip]="t('common.next')" (click)="onNextItem()"
+                [disabled]="(selectedElementIdx ?? 0) >= visibleRowCount - 1">
+                <mat-icon color="primary">arrow_right</mat-icon>
+              </button>
+            </section>
+            <span class="toolbar-spacer"></span>
+            <section style="padding-left: 8px;">
+              <div class="example-button-container">
+                <button mat-fab [matTooltip]="t('backToList')" (click)="onBackToList()">
+                  <mat-icon>door_back</mat-icon>
+                </button>
+              </div>
+            </section>
+          </mat-toolbar-row>
+        </mat-toolbar>
+        <div class="container knowledge-exercises-detail-view">
+          <app-markdown-content [markdown]="getExtraInfoMarkdown()"
+            [enableMath]="false" [imageBaseUrl]="currentImageBaseUrl"></app-markdown-content>
+        </div>
+    }
+    <app-knowledge-exercises-list
+      [hidden]="mode() !== 'list'"
+      [allFiles]="allFiles()"
+      [(selectedFile)]="selectedFile"
+      [isLoadingContents]="isLoadingContents()"
+      [dataSource]="dataSource"
+      [selection]="selection"
+      [contentRatings]="contentRatingMap()"
+      [filterDefinition]="filterDefinition()"
+      [appliedFreeText]="freeText()"
+      (fileSelectionChanged)="onFileSelectionChanged($event)"
+      (freeTextChanged)="onFreeTextChanged($event)"
+      (defineFilter)="onDefineFilter()"
+      (clearFilter)="onClearFilter()"
+      (quickSelect)="onQuickSelect($event)"
+      (selectAllVisible)="onSelectAllVisible()"
+      (clearSelection)="onClearSelection()"
+      (allRowsToggled)="toggleAllRows()"
+      (contentRatingChanged)="onContentRatingChanged($event.item, $event.event)"
+      (showDetail)="onShowDetail($event)"
+      (showExtraInfo)="onShowExtraInfo($event)"
+      (print)="onPreviewWithOptions()">
+    </app-knowledge-exercises-list>
+  </div>
+</main>
+
+<app-footer></app-footer>
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.scss b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.scss
new file mode 100644
index 0000000..1ac7c8d
--- /dev/null
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.scss
@@ -0,0 +1,24 @@
+:host,
+.knowledge-exercises-page {
+  // Ensures that the footer is pushed to the bottom if the page is too short.
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.knowledge-exercises-page-content {
+  display: flex;
+  flex-wrap: wrap;
+  align-content: center;
+  justify-content: center;
+}
+
+.toolbar-spacer {
+  flex: 1 1 auto;
+}
+
+.example-button-container {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+}
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.spec.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.spec.ts
new file mode 100644
index 0000000..89aacea
--- /dev/null
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.spec.ts
@@ -0,0 +1,778 @@
+import type { ComponentFixture } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { MatDialog } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
+} from '@jsverse/transloco';
+import { FilterJoinType, FilterOperation, type IFilterDefinition } from 'actslib';
+import { Subject, of, throwError } from 'rxjs';
+import { vi } from 'vitest';
+
+import type { KnowledgeExerciseFileContent, LearningContent } from '../../../interfaces';
+import {
+  QuestionBankTypeEnum,
+  SelectionModeEnum,
+} from '../../../interfaces';
+import { LearningContentService, UIService } from '../../../services';
+import { LearningRatingService } from '../../../services/learning-rating.service';
+import { SharedFilterDialogComponent } from '../../../shared/filter-dialog';
+import { AppPageTitle } from '../../page-title/page-title';
+
+import { KnowledgeExercisesPrintOptionsDialogComponent } from './knowledge-exercises-printoptions-dialog.component';
+import { KnowledgeExercisesSelectDialogComponent } from './knowledge-exercises-select-dialog.component';
+import { KnowledgeExercisesComponent } from './knowledge-exercises.component';
+
+const mockLearningContents: LearningContent[] = [
+  { id: 1, categoryId: 6, nameEnglish: 'File1', nameChinese: '文件一', fileUrl: 'data/file1.json' },
+  { id: 2, categoryId: 6, nameEnglish: 'File2', nameChinese: '文件二', fileUrl: 'data/file2.json' },
+];
+
+const mockItems: KnowledgeExerciseFileContent[] = [
+  {
+    id: '1',
+    order: 1,
+    itemType: QuestionBankTypeEnum.SingleChoice,
+    question: 'What is 1+1?',
+    options: { A: '1', B: '2', C: '3', D: '4' },
+    answer: 'B',
+    tags: ['math'],
+    itemTypeString: '单选题',
+    hasAnswer: true,
+    difficulty: 2,
+    suggestedCompletionTime: 5,
+  },
+  {
+    id: '2',
+    order: 2,
+    itemType: QuestionBankTypeEnum.TrueFalse,
+    question: 'The sky is blue',
+    answer: '1',
+    itemTypeString: '判断题',
+    hasAnswer: true,
+    extraInfo: ['Background note'],
+  },
+];
+
+function mockTranslocoService() {
+  return {
+    setActiveLang: vi.fn(),
+    getActiveLang: vi.fn(),
+    selectTranslate: vi.fn().mockReturnValue(of('')),
+    _loadDependencies: vi.fn().mockReturnValue(of(null)),
+    translate: vi.fn((key: string) => key),
+    activeLang: 'en',
+    config: { reRenderOnLangChange: true, prodMode: false },
+    langChanges$: of('en'),
+    events$: of(),
+  };
+}
+
+describe('KnowledgeExercisesComponent', () => {
+  let component: KnowledgeExercisesComponent;
+  let fixture: ComponentFixture<KnowledgeExercisesComponent>;
+  let mockLearningContentService: any;
+  let mockUIService: any;
+  let mockRouter: any;
+  let mockDialog: any;
+  let mockRatingService: any;
+
+  beforeEach(async () => {
+    mockLearningContentService = {
+      getKnowledgeBankContents: vi.fn().mockReturnValue(of(mockLearningContents)),
+      getKnowledgeExerciseContent: vi.fn(),
+      getStorageFileBaseUrl: vi.fn().mockReturnValue('https://test/api/Storage/knowledge-exercises/'),
+    };
+    mockUIService = { setSelectedExerciseItem: vi.fn() };
+    mockRouter = { navigate: vi.fn() };
+    mockDialog = { open: vi.fn() };
+    mockRatingService = { getRatings: vi.fn().mockReturnValue(of([])), upsertRating: vi.fn() };
+
+    await TestBed.configureTestingModule({
+      imports: [KnowledgeExercisesComponent, NoopAnimationsModule],
+      providers: [
+        { provide: LearningContentService, useValue: mockLearningContentService },
+        { provide: UIService, useValue: mockUIService },
+        { provide: Router, useValue: mockRouter },
+        { provide: MatDialog, useValue: mockDialog },
+        { provide: LearningRatingService, useValue: mockRatingService },
+        { provide: AppPageTitle, useValue: { title: '' } as AppPageTitle },
+        { provide: TranslocoService, useValue: mockTranslocoService() },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(KnowledgeExercisesComponent);
+    component = fixture.componentInstance;
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  describe('ngOnInit', () => {
+    it('should set page title to Exercises', () => {
+      fixture.detectChanges();
+      expect(component.pageTitle.title).toBe('Exercises');
+    });
+
+    it('should load all data files on initialization', () => {
+      fixture.detectChanges();
+      expect(mockLearningContentService.getKnowledgeBankContents).toHaveBeenCalled();
+      expect(component.allFiles()).toEqual(mockLearningContents);
+      expect(component.isLoadingContents()).toBe(false);
+    });
+
+    it('should handle error when loading data files fails', () => {
+      mockLearningContentService.getKnowledgeBankContents.mockReturnValue(
+        throwError(() => new Error('Load failed'))
+      );
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      fixture.detectChanges();
+
+      expect(console.error).toHaveBeenCalled();
+      expect(component.isLoadingContents()).toBe(false);
+    });
+  });
+
+  describe('onFileSelectionChanged', () => {
+    it('should load file content when file is selected', () => {
+      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(of(mockItems));
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+
+      expect(mockLearningContentService.getKnowledgeExerciseContent).toHaveBeenCalledWith('data/file1.json');
+      expect(component.dataSource.data).toEqual(mockItems);
+    });
+
+    it('should compute the image base url for the selected file', () => {
+      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(of(mockItems));
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+
+      expect(component.currentImageBaseUrl).toBe('https://test/api/Storage/knowledge-exercises/');
+    });
+
+    it('should clear any existing selection when switching files', () => {
+      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(of(mockItems));
+      component.dataSource.data = mockItems.slice();
+      component.selection.select(mockItems[0]);
+      expect(component.selection.selected.length).toBe(1);
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+
+      expect(component.selection.isEmpty()).toBe(true);
+    });
+
+    it('should handle undefined file selection by clearing state', () => {
+      component.studyContentId = 5;
+      component.dataSource.data = mockItems.slice();
+
+      component.onFileSelectionChanged({ value: undefined } as any);
+
+      expect(component.dataSource.data.length).toBe(0);
+      expect(component.studyContentId).toBe(0);
+    });
+
+    it('should load ratings for the selected content and force a re-filter', () => {
+      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(of(mockItems));
+      mockRatingService.getRatings.mockReturnValue(
+        of([{ id: 1, contentId: 1, itemId: 2, rating: 4 }])
+      );
+      component.onFreeTextChanged('sky');
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+
+      expect(mockRatingService.getRatings).toHaveBeenCalledWith(1);
+      expect(component.getRating('2')).toBe(4);
+      // The filter re-runs after ratings arrive: the row still matches the
+      // free text and nothing else.
+      expect(component.dataSource.filteredData.length).toBe(1);
+    });
+
+    it('should clear data and content id when file content fails to load', () => {
+      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(
+        throwError(() => new Error('Load failed'))
+      );
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+
+      expect(component.dataSource.data.length).toBe(0);
+      expect(component.studyContentId).toBe(0);
+    });
+
+    it('should ignore stale content loads after a rapid file switch', () => {
+      // First selection: a controllable observable that emits when we decide.
+      const firstLoad$ = new Subject<KnowledgeExerciseFileContent[]>();
+      mockLearningContentService.getKnowledgeExerciseContent
+        .mockReturnValueOnce(firstLoad$.asObservable())
+        .mockReturnValueOnce(of(mockItems));
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+      component.onFileSelectionChanged({ value: mockLearningContents[1] } as any);
+      // The stale load resolves after the second selection has won.
+      firstLoad$.next([mockItems[0]]);
+
+      expect(component.dataSource.data).toEqual(mockItems);
+    });
+
+    it('should ignore rating clicks on stale rows while the new file is loading', () => {
+      component.studyContentId = 99; // previously loaded file
+      const content$ = new Subject<KnowledgeExerciseFileContent[]>();
+      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(content$);
+      const event: any = {
+        value: 3,
+        source: { value: undefined, buttonToggleGroup: { value: 3 } },
+      };
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+
+      // The old file's rows are still on screen: rating writes are disabled
+      // so a click cannot upsert (newContentId, oldItemId).
+      expect(component.studyContentId).toBe(0);
+      component.onContentRatingChanged(mockItems[0], event);
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+
+      // Once the new rows are displayed, rating is allowed again.
+      content$.next(mockItems);
+      expect(component.studyContentId).toBe(1);
+    });
+
+    it('should keep locally applied ratings when a stale getRatings response lands', () => {
+      const content$ = new Subject<KnowledgeExerciseFileContent[]>();
+      const ratings$ = new Subject<{ itemId: number; rating: number }[]>();
+      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(content$);
+      mockRatingService.getRatings.mockReturnValue(ratings$);
+      // The upsert stays in flight (never completes in this test).
+      mockRatingService.upsertRating.mockReturnValue(new Subject());
+
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+      content$.next(mockItems);
+
+      const event: any = {
+        value: 4,
+        source: { value: undefined, buttonToggleGroup: { value: 4 } },
+      };
+      component.onContentRatingChanged(mockItems[0], event);
+      expect(mockRatingService.upsertRating).toHaveBeenCalledWith(1, 1, 4);
+
+      // A server snapshot computed *before* the click arrives late and empty.
+      ratings$.next([]);
+
+      // The in-flight rating survives the map rebuild instead of visually
+      // reverting to the stale server state.
+      expect(component.getRating('1')).toBe(4);
+    });
+  });
+
+  describe('filter pipeline', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockItems.slice();
+    });
+
+    it('should apply live free text as a JSON filter and filter rows', () => {
+      component.onFreeTextChanged('sky');
+
+      expect(component.dataSource.filter).toContain('sky');
+      expect(component.dataSource.filteredData.length).toBe(1);
+    });
+
+    it('should match every whitespace-separated term (AND semantics)', () => {
+      component.onFreeTextChanged('sky blue');
+      expect(component.dataSource.filteredData.length).toBe(1);
+
+      component.onFreeTextChanged('sky missing');
+      expect(component.dataSource.filteredData.length).toBe(0);
+    });
+
+    it('should restore all rows when free text is cleared', () => {
+      component.onFreeTextChanged('sky');
+      component.onFreeTextChanged('');
+
+      expect(component.dataSource.filter).toBe('');
+      expect(component.dataSource.filteredData.length).toBe(2);
+    });
+
+    /** Wrap conditions in an AND root, as the shared dialog emits them. */
+    const andRoot = (
+      ...conditions: IFilterDefinition['conditions']
+    ): IFilterDefinition => ({ join: FilterJoinType.AND, conditions });
+
+    it('should apply conditions emitted by the shared filter dialog on submit', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ root: andRoot({ property: 'tags', operation: FilterOperation.Contains, lowValue: 'math' }) })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onDefineFilter();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(SharedFilterDialogComponent, expect.anything());
+      expect(component.dataSource.filteredData.length).toBe(1);
+      expect(component.dataSource.filteredData[0].id).toBe('1');
+    });
+
+    it('should seed the dialog with the current definition', () => {
+      const seed = andRoot({ property: 'id', operation: FilterOperation.Equal, lowValue: '1' });
+      component.filterDefinition.set(seed);
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onDefineFilter();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        SharedFilterDialogComponent,
+        expect.objectContaining({
+          data: expect.objectContaining({ root: seed }),
+        })
+      );
+    });
+
+    it('should leave the filter untouched when the dialog is cancelled', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onDefineFilter();
+
+      expect(component.dataSource.filter).toBe('');
+      expect(component.dataSource.filteredData.length).toBe(2);
+    });
+
+    it('should apply the itemType OR-of-Equal group from the enum multi-select', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({
+          root: andRoot({
+            join: FilterJoinType.OR,
+            conditions: [
+              { property: 'itemType', operation: FilterOperation.Equal, lowValue: QuestionBankTypeEnum.TrueFalse, enumValues: QuestionBankTypeEnum },
+              { property: 'itemType', operation: FilterOperation.Equal, lowValue: QuestionBankTypeEnum.Essay, enumValues: QuestionBankTypeEnum },
+            ],
+          }),
+        })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onDefineFilter();
+
+      // Only the TrueFalse row matches; Essay matches nothing here.
+      expect(component.dataSource.filteredData.length).toBe(1);
+      expect(component.dataSource.filteredData[0].id).toBe('2');
+    });
+
+    it('should apply rating conditions with unrated (0) semantics', () => {
+      component.contentRatingMap.set(new Map([[2, 5]]));
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ root: andRoot({ property: 'rating', operation: FilterOperation.LessThan, lowValue: 1 }) })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onDefineFilter();
+
+      // Only the unrated row (rating 0 < 1) survives.
+      expect(component.dataSource.filteredData.length).toBe(1);
+      expect(component.dataSource.filteredData[0].id).toBe('1');
+    });
+
+    it('should clear all conditions', () => {
+      component.contentRatingMap.set(new Map([[2, 5]]));
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({
+          root: andRoot(
+            { property: 'tags', operation: FilterOperation.Contains, lowValue: 'math' },
+            { property: 'rating', operation: FilterOperation.LessThan, lowValue: 1 }
+          ),
+        })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+      component.onDefineFilter();
+      expect(component.dataSource.filteredData.length).toBe(1);
+
+      component.onClearFilter();
+
+      expect(component.dataSource.filter).toBe('');
+      expect(component.dataSource.filteredData.length).toBe(2);
+    });
+  });
+
+  describe('selection methods', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockItems.slice();
+    });
+
+    it('isAllSelected should return true when all visible rows are selected', () => {
+      component.selection.select(...mockItems);
+      expect(component.isAllSelected()).toBe(true);
+    });
+
+    it('isAllSelected should return false when not all selected', () => {
+      component.selection.select(mockItems[0]);
+      expect(component.isAllSelected()).toBe(false);
+    });
+
+    it('toggleAllRows should select all when not all selected', () => {
+      component.toggleAllRows();
+      expect(component.selection.selected.length).toBe(mockItems.length);
+    });
+
+    it('toggleAllRows should clear selection when all selected', () => {
+      component.selection.select(...mockItems);
+      component.toggleAllRows();
+      expect(component.selection.selected.length).toBe(0);
+    });
+
+    it('toggleAllRows should scope to visible rows when a filter is active', () => {
+      component.onFreeTextChanged('sky');
+
+      component.toggleAllRows();
+
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockItems[1])).toBe(true);
+    });
+
+    it('onClearSelection should drop every selected row', () => {
+      component.selection.select(mockItems[0], mockItems[1]);
+
+      component.onClearSelection();
+
+      expect(component.selection.isEmpty()).toBe(true);
+    });
+
+    it('onSelectAllVisible should replace the selection with the visible rows', () => {
+      component.selection.select(mockItems[0]);
+      component.onFreeTextChanged('sky');
+
+      component.onSelectAllVisible();
+
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockItems[1])).toBe(true);
+    });
+  });
+
+  describe('onQuickSelect', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockItems.slice();
+    });
+
+    it("should open the select dialog in Free Selection mode for 'random' and apply the result", () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ selectedSelectMode: SelectionModeEnum.FreeSelection, countOfItems: 1 })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onQuickSelect('random');
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        KnowledgeExercisesSelectDialogComponent,
+        expect.objectContaining({
+          data: expect.objectContaining({ mode: SelectionModeEnum.FreeSelection, rowCount: 2 }),
+        })
+      );
+      expect(component.selection.selected.length).toBe(1);
+    });
+
+    it("should open the select dialog in By Count mode for 'sequence' and apply count + offset", () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ selectedSelectMode: SelectionModeEnum.ByCount, countOfItems: 1, countOfOffset: 1 })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onQuickSelect('sequence');
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        KnowledgeExercisesSelectDialogComponent,
+        expect.objectContaining({
+          data: expect.objectContaining({ mode: SelectionModeEnum.ByCount, rowCount: 2 }),
+        })
+      );
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockItems[1])).toBe(true);
+    });
+
+    it("should select matching ids for 'ids' and ignore non-matching tokens", () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ selectedSelectMode: SelectionModeEnum.ByID, importIDs: '2, 99' })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onQuickSelect('ids');
+
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockItems[1])).toBe(true);
+    });
+
+    it("should leave the selection untouched for 'ids' when no token matches", () => {
+      component.selection.select(mockItems[0]);
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ selectedSelectMode: SelectionModeEnum.ByID, importIDs: '98, 99' })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onQuickSelect('ids');
+
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockItems[0])).toBe(true);
+    });
+
+    it('should leave the selection untouched when the dialog is cancelled', () => {
+      component.selection.select(mockItems[0]);
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onQuickSelect('random');
+
+      expect(component.selection.selected.length).toBe(1);
+    });
+  });
+
+  describe('onContentRatingChanged', () => {
+    it('should not save and should restore the previous selection when the toggle is deselected', () => {
+      // Clicking the active toggle in a mat-button-toggle-group deselects it,
+      // emitting change with value undefined.
+      component.contentRatingMap.set(new Map([[1, 3]]));
+      const event: any = {
+        value: undefined,
+        source: { value: 3, buttonToggleGroup: { value: undefined } },
+      };
+
+      component.onContentRatingChanged(mockItems[0], event);
+
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+      expect(event.source.buttonToggleGroup.value).toBe(3);
+    });
+
+    it('should save the rating and update the map', () => {
+      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(of(mockItems));
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+      mockRatingService.upsertRating.mockReturnValue(
+        of({ id: 9, contentId: 1, itemId: 1, rating: 5 })
+      );
+      const event: any = {
+        value: 5,
+        source: { value: undefined, buttonToggleGroup: { value: 5 } },
+      };
+
+      component.onContentRatingChanged(mockItems[0], event);
+
+      expect(mockRatingService.upsertRating).toHaveBeenCalledWith(1, 1, 5);
+      expect(component.getRating('1')).toBe(5);
+    });
+
+    it('should not save without a selected file content', () => {
+      const event: any = {
+        value: 4,
+        source: { value: undefined, buttonToggleGroup: { value: 4 } },
+      };
+
+      component.onContentRatingChanged(mockItems[0], event);
+
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+    });
+
+    it('should revert the toggle when the save fails', () => {
+      mockLearningContentService.getKnowledgeExerciseContent.mockReturnValue(of(mockItems));
+      component.onFileSelectionChanged({ value: mockLearningContents[0] } as any);
+      mockRatingService.upsertRating.mockReturnValue(
+        throwError(() => new Error('Save failed'))
+      );
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+      const event: any = {
+        value: 5,
+        source: { value: undefined, buttonToggleGroup: { value: 5 } },
+      };
+
+      component.onContentRatingChanged(mockItems[0], event);
+
+      expect(event.source.buttonToggleGroup.value).toBe(0);
+      expect(component.getRating('1')).toBe(0);
+    });
+  });
+
+  describe('onPreviewWithOptions (print)', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockItems.slice();
+    });
+
+    it('should open print options dialog with the file name as default title', () => {
+      component.selectedFile.set(mockLearningContents[0]);
+      const mockDialogRef = { afterClosed: () => of(undefined) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onPreviewWithOptions();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        KnowledgeExercisesPrintOptionsDialogComponent,
+        expect.objectContaining({
+          data: { defaultTitle: '文件一' },
+          width: '600px',
+        })
+      );
+    });
+
+    it('should store settings and print the selection when dialog returns result', () => {
+      component.selection.select(mockItems[0]);
+      const mockResult = {
+        formTitle: 'Test',
+        printEntryDate: true,
+        printScore: true,
+        printAnswer: true,
+        printHintOfAnswer: true,
+        printID: true,
+        hideLabelOfQuestionType: [],
+        shuffleOptionsInSelection: false,
+      };
+      const mockDialogRef = { afterClosed: () => of(mockResult) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onPreviewWithOptions();
+
+      expect(component.printSetting.formTitle).toBe('Test');
+      expect(component.printSetting.printAnswer).toBe(true);
+      expect(component.printSetting.shuffleOptionsInSelection).toBe(false);
+      expect(mockUIService.setSelectedExerciseItem).toHaveBeenCalled();
+      expect(mockRouter.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
+    });
+
+    it('should not print when dialog is cancelled', () => {
+      const mockDialogRef = { afterClosed: () => of(undefined) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onPreviewWithOptions();
+
+      expect(mockUIService.setSelectedExerciseItem).not.toHaveBeenCalled();
+      expect(mockRouter.navigate).not.toHaveBeenCalled();
+    });
+
+    it('should print only the selected rows (selection-gated)', () => {
+      component.selection.select(mockItems[1]);
+      const mockDialogRef = { afterClosed: () => of({
+        formTitle: 'T', printEntryDate: false, printScore: false, printAnswer: false,
+        printHintOfAnswer: false, printID: true, hideLabelOfQuestionType: [], shuffleOptionsInSelection: true,
+      }) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onPreviewWithOptions();
+
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
+      expect(callArgs?.[0].length).toBe(1);
+      expect(callArgs?.[0][0].id).toBe('2');
+      expect(callArgs?.[0][0].order).toBe(1);
+    });
+
+    it('should renumber copies and leave the cached source rows untouched', () => {
+      component.selection.select(mockItems[1]); // original order 2 → printed as 1
+      const mockDialogRef = { afterClosed: () => of({
+        formTitle: 'T', printEntryDate: false, printScore: false, printAnswer: false,
+        printHintOfAnswer: false, printID: true, hideLabelOfQuestionType: [], shuffleOptionsInSelection: true,
+      }) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onPreviewWithOptions();
+
+      const printed = mockUIService.setSelectedExerciseItem.mock.lastCall?.[0];
+      expect(printed[0]).not.toBe(mockItems[1]); // a copy, not the cached row
+      expect(printed[0].order).toBe(1);
+      // The LearningContentService-cached objects keep their original order.
+      expect(mockItems[1].order).toBe(2);
+    });
+  });
+
+  describe('detail / extra info screens', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockItems.slice();
+    });
+
+    it('onShowDetail should switch to the detail view for the matching id', () => {
+      component.onShowDetail('1');
+
+      expect(component.mode()).toBe('detail');
+      expect(component.selectedElement?.id).toBe('1');
+      expect(component.markdownStr.length).toBeGreaterThan(0);
+    });
+
+    it('onShowDetail should keep the list when the id is not visible', () => {
+      component.onShowDetail('nope');
+
+      expect(component.mode()).toBe('list');
+    });
+
+    it('onShowExtraInfo should switch to the extra info view', () => {
+      component.onShowExtraInfo('2');
+
+      expect(component.mode()).toBe('extrainfo');
+      expect(component.getExtraInfoMarkdown()).toContain('Background note');
+    });
+
+    it('onNextItem/onPreviousItem should move within the visible rows', () => {
+      component.onShowDetail('1');
+
+      component.onNextItem();
+      expect(component.selectedElement?.id).toBe('2');
+      expect(component.selectedElementIdx).toBe(1);
+
+      component.onPreviousItem();
+      expect(component.selectedElement?.id).toBe('1');
+      expect(component.selectedElementIdx).toBe(0);
+    });
+
+    it("onNextItem/onPreviousItem should hide the previous item's answer panel", () => {
+      component.onShowDetail('1');
+      component.onToggleAnswer();
+      expect(component.showDetailAnswer).toBe(true);
+
+      component.onNextItem();
+      expect(component.showDetailAnswer).toBe(false);
+
+      component.onToggleAnswer();
+      component.onPreviousItem();
+      expect(component.showDetailAnswer).toBe(false);
+    });
+
+    it('should keep the list screen mounted (hidden) during detail visits', () => {
+      fixture.detectChanges();
+      const listEl = () =>
+        fixture.nativeElement.querySelector('app-knowledge-exercises-list') as HTMLElement;
+      expect(listEl()).toBeTruthy();
+      expect(listEl().hidden).toBe(false);
+
+      component.onShowDetail('1');
+      fixture.detectChanges();
+      // Not destroyed: the paginator page and sort state survive the trip.
+      expect(listEl()).toBeTruthy();
+      expect(listEl().hidden).toBe(true);
+
+      component.onBackToList();
+      fixture.detectChanges();
+      expect(listEl().hidden).toBe(false);
+    });
+
+    it('onBackToList should return to the list and reset toggles', () => {
+      component.onShowDetail('1');
+      component.onToggleAnswer();
+      component.onToggleHintOfAnswer();
+      expect(component.showDetailAnswer).toBe(true);
+
+      component.onBackToList();
+
+      expect(component.mode()).toBe('list');
+      expect(component.showDetailAnswer).toBe(false);
+      expect(component.showDetailHintOfAnswer).toBe(false);
+    });
+  });
+
+  describe('visibleRowCount', () => {
+    it('should reflect the filtered count when a filter is active', () => {
+      component.dataSource.data = mockItems.slice();
+      expect(component.visibleRowCount).toBe(2);
+
+      component.onFreeTextChanged('sky');
+      expect(component.visibleRowCount).toBe(1);
+    });
+  });
+});
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.ts b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.ts
new file mode 100644
index 0000000..a475428
--- /dev/null
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises-list/knowledge-exercises.component.ts
@@ -0,0 +1,785 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import type { OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  inject,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { MatButtonModule } from '@angular/material/button';
+import type { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { MatDialog } from '@angular/material/dialog';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatIconModule } from '@angular/material/icon';
+import type { MatSelectChange } from '@angular/material/select';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { Router } from '@angular/router';
+import { TranslocoModule } from '@jsverse/transloco';
+import { FisherYatesShuffle, type IFilterDefinition } from 'actslib';
+
+import type {
+  KnowledgeExerciseFileContent,
+  KnowledgeExercisePrintOption,
+  KnowledgeListFilter,
+  LearningContent,
+  QuestionBankItemBase,
+  QuestionBankTypeKeys,
+  VocabularySelectOption,
+} from '../../../interfaces';
+import {
+  KNOWLEDGE_FILTER_PROPERTIES,
+  QuestionBankTypeEnum,
+  SelectionModeEnum,
+  convertQuestionBankItemToMarkdown,
+  convertToQuestionBankItem,
+  emptyKnowledgeFilterDefinition,
+  isKnowledgeListFilterEmpty,
+  matchKnowledgeListFilter,
+} from '../../../interfaces';
+import {
+  LearningContentService,
+  LearningRatingService,
+  UIService,
+  ratingItemKey,
+} from '../../../services';
+import type {
+  FilterDialogData,
+  FilterDialogResult,
+} from '../../../shared/filter-dialog/filter-dialog-model';
+import { SharedFilterDialogComponent } from '../../../shared/filter-dialog/filter-dialog.component';
+import { FooterComponent } from '../../../shared/footer/footer';
+import { MarkdownContentComponent } from '../../../shared/markdown-content';
+import { AppPageTitle } from '../../page-title/page-title';
+
+import { KnowledgeExercisesListComponent } from './knowledge-exercises-list.component';
+import { KnowledgeExercisesPrintOptionsDialogComponent } from './knowledge-exercises-printoptions-dialog.component';
+import { KnowledgeExercisesSelectDialogComponent } from './knowledge-exercises-select-dialog.component';
+
+/**
+ * The screens of the knowledge exercises page. The list stays mounted (hidden
+ * outside 'list' mode) so its paginator/sort state survives detail visits;
+ * detail and extrainfo render on demand.
+ */
+export type KnowledgeExercisesMode = 'list' | 'detail' | 'extrainfo';
+
+@Component({
+  selector: 'app-knowledge-exercises',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatButtonModule,
+    MatDividerModule,
+    MatIconModule,
+    MatToolbarModule,
+    MatTooltipModule,
+    FooterComponent,
+    MarkdownContentComponent,
+    KnowledgeExercisesListComponent,
+    TranslocoModule,
+  ],
+  templateUrl: './knowledge-exercises.component.html',
+  styleUrl: './knowledge-exercises.component.scss',
+  host: {
+    class: 'app-main-content',
+  },
+})
+export class KnowledgeExercisesComponent implements OnInit {
+  // Current screen (list table, item detail, item extra info).
+  mode = signal<KnowledgeExercisesMode>('list');
+  allFiles = signal<LearningContent[]>([]);
+  selectedFile = signal<LearningContent | undefined>(undefined);
+  isLoadingContents = signal(true);
+  // Table for content (rendered by the list child component, which also wires
+  // the paginator/sort it owns onto this shared data source).
+  dataSource: MatTableDataSource<KnowledgeExerciseFileContent> = new MatTableDataSource();
+  selection = new SelectionModel<KnowledgeExerciseFileContent>(true, []);
+  // Ratings of the loaded file's items (keyed by ratingItemKey of the string
+  // item id). Replaced (not mutated) on every update so the new reference
+  // reaches the OnPush list child as an input.
+  contentRatingMap = signal(new Map<number, number>());
+  // Filter bar: the container is the single source of truth for the applied
+  // condition definition (it opens the shared filter dialog). freeText is fed
+  // back from the child's live input via freeTextChanged.
+  freeText = signal('');
+  filterDefinition = signal<IFilterDefinition>(emptyKnowledgeFilterDefinition());
+  // Parsed form of the active list filter; applyListFilter keeps it in sync
+  // with dataSource.filter so the row predicate does not JSON.parse per row.
+  // Null means no filter (MatTable skips the predicate for an empty filter).
+  private listFilterCriteria: KnowledgeListFilter | null = null;
+  // Title
+  pageTitle: AppPageTitle = inject(AppPageTitle);
+  // Service
+  private readonly contentService = inject(LearningContentService);
+  readonly dialog = inject(MatDialog);
+  private readonly ratingService = inject(LearningRatingService);
+  private readonly destroyRef = inject(DestroyRef);
+  // Navigation
+  readonly router = inject(Router);
+  readonly uiService = inject(UIService);
+  // Maps selected file to backend ContentId
+  studyContentId = 0;
+  // Latest rating the user requested per item in the list view; upsert
+  // responses that arrive out of order are dropped against this map.
+  private pendingContentRatings = new Map<number, number>();
+  // Monotonic token of the current file load. Rapid file switches are
+  // last-click-wins: a slow response from a previous file must not overwrite
+  // the newly selected file's data/ratings (both loads compare against it).
+  private fileLoadToken = 0;
+  // Print options.
+  printSetting: KnowledgeExercisePrintOption = {
+    formTitle: '',
+    printEntryDate: false,
+    printScore: false,
+    printAnswer: false,
+    printHintOfAnswer: false,
+    printID: true,
+    hideLabelOfQuestionType: [],
+    shuffleOptionsInSelection: true,
+  };
+  // Detail screen state (rendered inline by this container).
+  selectedElementIdx?: number;
+  selectedElement?: QuestionBankItemBase<string>;
+  markdownStr: string = '';
+  answerMarkdownStr: string = '';
+  hintOfAnswerMarkdownStr: string = '';
+  showDetailAnswer = false;
+  showDetailHintOfAnswer = false;
+  // Base URL for resolving relative image paths in the currently-loaded exercise JSON
+  currentImageBaseUrl?: string;
+
+  /** Rows the table currently shows: the filtered count when a filter is active. */
+  get visibleRowCount(): number {
+    return this.dataSource.filter
+      ? this.dataSource.filteredData.length
+      : this.dataSource.data.length;
+  }
+
+  /**
+   * Whether every visible row is selected. Comparing against the visible rows
+   * (not just counts) keeps the header checkbox honest when the selection also
+   * contains rows the current filter hides.
+   */
+  isAllSelected() {
+    const visible = this.getVisibleData();
+    return visible.length > 0 && visible.every(row => this.selection.isSelected(row));
+  }
+
+  /**
+   * Selects all visible rows if they are not all selected; otherwise clear
+   * selection. Scoped to the filtered rows so the table filter keeps
+   * describing what the exercises will use (see getVisibleData).
+   * Replaces any previous selection: it may still contain rows the current
+   * filter hides, and hidden rows would otherwise leak into the exercises.
+   */
+  toggleAllRows() {
+    if (this.isAllSelected()) {
+      this.selection.clear();
+      return;
+    }
+
+    this.selection.setSelection(...this.getVisibleData());
+  }
+
+  constructor() {
+    this.dataSource.sortingDataAccessor = (
+      data: KnowledgeExerciseFileContent,
+      sortHeaderId: string
+    ): string | number => {
+      if (sortHeaderId === 'rating') {
+        return this.getRating(data.id);
+      }
+      switch (sortHeaderId) {
+        case 'id':
+          return (data.id ?? '').toLowerCase();
+        case 'itemtype':
+          return (data.itemTypeString ?? '').toLowerCase();
+        case 'difficulty':
+          return data.difficulty ?? 0;
+        case 'suggestedCompletionTime':
+          return data.suggestedCompletionTime ?? 0;
+        case 'tags':
+          return (data.tags ?? []).join(' ').toLowerCase();
+        default:
+          return '';
+      }
+    };
+    // Filter bar criteria travel through MatTableDataSource's single string
+    // channel as JSON; applyListFilter parses it once into listFilterCriteria
+    // (the rating lives in contentRatingMap, so the predicate closes over
+    // `this` to reach both via getRating).
+    this.dataSource.filterPredicate = (
+      data: KnowledgeExerciseFileContent
+    ): boolean =>
+      matchKnowledgeListFilter(data, this.getRating(data.id), this.listFilterCriteria!);
+  }
+
+  ngOnInit(): void {
+    this.pageTitle.title = 'Exercises';
+
+    this.contentService
+      .getKnowledgeBankContents()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: contents => {
+          this.allFiles.set(contents);
+          this.isLoadingContents.set(false);
+        },
+        error: err => {
+          console.error(err);
+          this.isLoadingContents.set(false);
+        },
+      });
+  }
+
+  // ── Filter bar ──────────────────────────────────────────────────
+
+  applyListFilter(criteria: KnowledgeListFilter) {
+    // Parsed once here; the row predicate reads this field instead of
+    // JSON.parse-ing the filter string for every row.
+    this.listFilterCriteria = isKnowledgeListFilterEmpty(criteria) ? null : criteria;
+    // An empty filter string keeps the "no filter" contract the rest of the
+    // page relies on (visibleRowCount, getVisibleData).
+    this.dataSource.filter = this.listFilterCriteria === null
+      ? ''
+      : JSON.stringify(criteria);
+  }
+
+  onFreeTextChanged(text: string): void {
+    this.freeText.set(text);
+    this.applyCurrentFilter();
+  }
+
+  onDefineFilter(): void {
+    this.dialog
+      .open<SharedFilterDialogComponent, FilterDialogData, FilterDialogResult | undefined>(
+        SharedFilterDialogComponent,
+        {
+          data: {
+            properties: KNOWLEDGE_FILTER_PROPERTIES,
+            root: this.filterDefinition(),
+          },
+          // Tree navigator + detail pane sit side by side; the splitter can
+          // resize them but needs the extra width to start from.
+          width: '880px',
+          enterAnimationDuration: 800,
+          exitAnimationDuration: 500,
+        }
+      )
+      .afterClosed()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(result => {
+        // undefined (Cancel / backdrop / Esc) leaves the previous filter untouched.
+        if (result !== undefined) {
+          this.filterDefinition.set(result.root);
+          this.applyCurrentFilter();
+        }
+      });
+  }
+
+  onClearFilter(): void {
+    this.filterDefinition.set(emptyKnowledgeFilterDefinition());
+    this.applyCurrentFilter();
+  }
+
+  private applyCurrentFilter(): void {
+    this.applyListFilter({
+      freeText: this.freeText(),
+      root: this.filterDefinition(),
+    });
+  }
+
+  // ── Ratings ─────────────────────────────────────────────────────
+
+  getRating(itemId: string | number | undefined): number {
+    const numId = ratingItemKey(itemId);
+    return numId === undefined ? 0 : (this.contentRatingMap().get(numId) ?? 0);
+  }
+
+  onContentRatingChanged(item: KnowledgeExerciseFileContent, event: MatButtonToggleChange) {
+    if (event.value === undefined || event.value === null || event.value < 1) {
+      // Clicking the active toggle deselects it (value becomes undefined).
+      // There is no "clear rating" operation, so restore the previous selection.
+      event.source.buttonToggleGroup.value = event.source.value;
+      return;
+    }
+    const numId = ratingItemKey(item.id);
+    if (this.studyContentId <= 0 || numId === undefined) {
+      return;
+    }
+
+    this.pendingContentRatings.set(numId, event.value);
+    this.ratingService
+      .upsertRating(this.studyContentId, numId, event.value)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (saved) => {
+          // Drop stale responses: a newer click on the same item is already
+          // in flight and its response will set the final value.
+          if (this.pendingContentRatings.get(numId) !== event.value) {
+            return;
+          }
+          this.pendingContentRatings.delete(numId);
+          this.contentRatingMap.update(m => new Map(m).set(numId, saved.rating));
+          // The filter predicate closes over contentRatingMap, and a rating
+          // change does not change the filter string — reassign it to force a
+          // re-run while a filter is active, or the table shows stale rows.
+          if (this.dataSource.filter) {
+            this.dataSource.filter = this.dataSource.filter;
+          }
+        },
+        error: err => {
+          console.error('Failed to save rating', err);
+          // A newer click on the same item is in flight; its outcome decides
+          // the final value — reverting now would clobber it.
+          if (this.pendingContentRatings.get(numId) !== event.value) {
+            return;
+          }
+          this.pendingContentRatings.delete(numId);
+          // Revert the toggle to the last confirmed value so the view does
+          // not show a rating the server never saved. The [ngModel] binding
+          // value is unchanged (no writeValue runs), so the group must be
+          // reset directly, like the deselect path above.
+          event.source.buttonToggleGroup.value = this.getRating(item.id);
+        },
+      });
+  }
+
+  // ── File loading ────────────────────────────────────────────────
+
+  onFileSelectionChanged(event: MatSelectChange) {
+    // Drop any selection carried over from the previously loaded file — the
+    // SelectionModel holds references to the old file's row objects, which are
+    // no longer relevant and would otherwise keep the exercises acting on
+    // stale rows.
+    this.selection.clear();
+    this.pendingContentRatings.clear();
+
+    if (!event.value) {
+      this.fileLoadToken++;
+      this.dataSource.data = [];
+      this.studyContentId = 0;
+      this.contentRatingMap.set(new Map());
+      this.currentImageBaseUrl = undefined;
+      return;
+    }
+
+    const selectedContent = event.value as LearningContent;
+    const contentId = selectedContent.id;
+    // Rating writes stay disabled (studyContentId = 0) until the new file's
+    // rows actually replace the old ones in the `next` handler below: the
+    // old rows are still on screen while the load is in flight, and a click
+    // in that window would otherwise upsert (newContentId, oldItemId) —
+    // persisting a rating into the wrong file's namespace.
+    this.studyContentId = 0;
+    const token = ++this.fileLoadToken;
+    // Compute the base URL for resolving relative image paths within this JSON file
+    this.currentImageBaseUrl = this.contentService.getStorageFileBaseUrl(selectedContent.fileUrl);
+    // Clear the rating map BEFORE subscribing to content: cached content
+    // resolves synchronously, so the content `next` (which re-runs the
+    // filter predicate) would otherwise filter the new file's rows against
+    // the previous file's ratings.
+    this.contentRatingMap.set(new Map());
+
+    this.contentService
+      .getKnowledgeExerciseContent(selectedContent.fileUrl)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (df?: KnowledgeExerciseFileContent[]) => {
+          // A newer selection superseded this load.
+          if (token !== this.fileLoadToken) {
+            return;
+          }
+          if (df) {
+            this.dataSource.data = df.slice();
+            // The displayed rows now belong to this file — allow rating.
+            this.studyContentId = contentId;
+          }
+        },
+        error: err => {
+          console.error(err);
+          // A newer selection superseded this load; its error is stale.
+          if (token !== this.fileLoadToken) {
+            return;
+          }
+          // The new file failed to load: drop the previous file's rows so they
+          // are not shown (and rated) under the new file's studyContentId,
+          // which would persist ratings into the wrong file. Bump the token so
+          // the in-flight ratings load for this file is discarded too.
+          this.fileLoadToken++;
+          this.dataSource.data = [];
+          this.studyContentId = 0;
+          this.contentRatingMap.set(new Map());
+          this.pendingContentRatings.clear();
+        },
+      });
+
+    // Fetch ratings for this content from the API
+    if (contentId > 0) {
+      this.ratingService
+        .getRatings(contentId)
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          next: (ratings) => {
+            if (token !== this.fileLoadToken) {
+              return;
+            }
+            const newRatingMap = new Map<number, number>();
+            for (const r of ratings) {
+              if (r.itemId !== undefined) {
+                newRatingMap.set(r.itemId, r.rating);
+              }
+            }
+            // Local truth wins over the server snapshot: if a rating was
+            // saved (map) or is still in flight (pending) while this
+            // response — computed before it — was on the wire, rebuilding
+            // from the stale list alone would visually revert the fresh
+            // rating. Re-apply both on top before publishing.
+            this.contentRatingMap().forEach((value, key) => newRatingMap.set(key, value));
+            this.pendingContentRatings.forEach((value, key) => newRatingMap.set(key, value));
+            this.contentRatingMap.set(newRatingMap);
+            // The predicate closes over contentRatingMap, and the data was
+            // (re)filtered while the map was still empty — force a re-run now
+            // that real ratings are in, or a persisted rating filter shows
+            // stale rows (same trick as onContentRatingChanged).
+            if (this.dataSource.filter) {
+              this.dataSource.filter = this.dataSource.filter;
+            }
+          },
+          error: err => {
+            console.error('Failed to load ratings', err);
+            // Re-evaluate the rows against the (empty) rating map instead of
+            // leaving them filtered by the previous file's ratings until the
+            // next change — mirrors the success path.
+            if (token !== this.fileLoadToken) {
+              return;
+            }
+            if (this.dataSource.filter) {
+              this.dataSource.filter = this.dataSource.filter;
+            }
+          },
+        });
+    }
+  }
+
+  // ── Selection ───────────────────────────────────────────────────
+
+  /**
+   * Rows the table currently shows: filteredData when a filter is active.
+   * Exercise queues and selection strategies consume this so the table
+   * filter always describes what the exercises will use.
+   */
+  private getVisibleData(): KnowledgeExerciseFileContent[] {
+    return this.dataSource.filter ? this.dataSource.filteredData : this.dataSource.data.slice();
+  }
+
+  /**
+   * Clear the table selection from the Selection menu. Drops every selected
+   * row so the exercises no longer act on a stale selection.
+   */
+  onClearSelection(): void {
+    this.selection.clear();
+  }
+
+  /**
+   * Select every row the table currently shows (Selection ▾ > Select All
+   * Visible). Replaces any previous selection so hidden rows never leak into
+   * the exercises.
+   */
+  onSelectAllVisible(): void {
+    this.selection.setSelection(...this.getVisibleData());
+  }
+
+  /**
+   * Quick selection from the filter bar. Random reuses Free Selection (count
+   * on a shuffled source), Sequence reuses By Count (count + offset on the
+   * sorted source), IDs reuses By ID (comma-separated exercise ids); all open
+   * the shared select dialog.
+   */
+  onQuickSelect(mode: 'random' | 'sequence' | 'ids'): void {
+    const selectMode =
+      mode === 'random' ? SelectionModeEnum.FreeSelection
+      : mode === 'sequence' ? SelectionModeEnum.ByCount
+      : SelectionModeEnum.ByID;
+    this.onSelect(selectMode);
+  }
+
+  private onSelect(mode: SelectionModeEnum) {
+    const dialogRef = this.dialog.open(KnowledgeExercisesSelectDialogComponent, {
+      // rowCount bounds By Count's offset; visibleIds lets By ID validate at
+      // least one match. Both are snapshots of the visible (filtered) rows,
+      // so the dialog's validation matches what selection will act on.
+      data: {
+        mode,
+        rowCount: this.visibleRowCount,
+        visibleIds: this.getVisibleData().map(item => item.id ?? ''),
+      },
+      // By ID needs a wider dialog for the multi-line id list.
+      width: mode === SelectionModeEnum.ByID ? '500px' : '400px',
+      enterAnimationDuration: 800,
+      exitAnimationDuration: 500,
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(result => {
+        if (result !== undefined) {
+          this.applySelectionOption(result);
+        }
+      });
+  }
+
+  /**
+   * Apply a VocabularySelectOption produced by the select dialog. Each mode
+   * maps to its selection strategy; Free Selection is By Count on a shuffled
+   * source with offset 0.
+   */
+  private applySelectionOption(option: VocabularySelectOption): void {
+    switch (option.selectedSelectMode) {
+      case SelectionModeEnum.ByCount: {
+        const count = option.countOfItems ?? 0;
+        if (count > 0) {
+          this.applyCountSelection(this.getSortedData(), option.countOfOffset ?? 0, count);
+        }
+        break;
+      }
+      case SelectionModeEnum.FreeSelection: {
+        const count = option.countOfItems ?? 0;
+        if (count > 0) {
+          this.applyCountSelection(FisherYatesShuffle(this.getVisibleData()), 0, count);
+        }
+        break;
+      }
+      case SelectionModeEnum.ByID: {
+        // By ID: match item id text against the supplied list. Normalize
+        // separators (newlines/whitespace -> commas) so pasted lists work, and
+        // only touch the selection when at least one token matches — a
+        // no-match paste must never silently wipe the existing selection.
+        const tokens = (option.importIDs ?? '')
+          .split(/[\n\r,]+/)
+          .map(t => t.trim())
+          .filter(t => t.length > 0);
+        if (tokens.length > 0) {
+          const tokenSet = new Set(tokens);
+          const matched = this.getVisibleData().filter(item => tokenSet.has(item.id ?? ''));
+          if (matched.length > 0) {
+            this.selection.clear();
+            matched.forEach(item => this.selection.select(item));
+          }
+        }
+        break;
+      }
+    }
+  }
+
+  /**
+   * Select `count` items from `source` starting at `offset` (window [offset, offset+count)).
+   * Backs both By Count (sorted source) and Free Selection (shuffled source, offset 0) -
+   * the two modes differ only in the source array and whether offset is exposed.
+   */
+  private applyCountSelection(
+    source: KnowledgeExerciseFileContent[],
+    offset: number,
+    count: number
+  ): void {
+    this.selection.clear();
+    source.forEach((item, index) => {
+      if (index >= offset && index < offset + count) {
+        this.selection.select(item);
+      }
+    });
+  }
+
+  /** Returns the visible (filtered) rows in the current sort order (mirrors MatSort behavior). */
+  private getSortedData(): KnowledgeExerciseFileContent[] {
+    // The MatSort instance lives in the list child, which wires it onto this
+    // shared data source. Selection strategies consume the same rows the
+    // table shows, so start from the filtered set.
+    const source = this.getVisibleData();
+    const sort = this.dataSource.sort;
+    if (!sort || !sort.active || sort.direction === '') {
+      return source;
+    }
+
+    const sorted = source.slice();
+    sorted.sort((a, b) => {
+      const valueA = this.dataSource.sortingDataAccessor(a, sort.active);
+      const valueB = this.dataSource.sortingDataAccessor(b, sort.active);
+
+      let result = 0;
+      if (typeof valueA === 'string' && typeof valueB === 'string') {
+        result = valueA.localeCompare(valueB);
+      } else {
+        result = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      }
+
+      return sort.direction === 'asc' ? result : -result;
+    });
+
+    return sorted;
+  }
+
+  // ── Print ───────────────────────────────────────────────────────
+
+  onPreviewWithOptions() {
+    const dialogRef = this.dialog.open(KnowledgeExercisesPrintOptionsDialogComponent, {
+      data: {
+        defaultTitle: this.selectedFile()?.nameChinese || '',
+      },
+      width: '600px',
+      height: '500px',
+      enterAnimationDuration: 800,
+      exitAnimationDuration: 500,
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(result => {
+        if (result !== undefined) {
+          this.printSetting.formTitle = result.formTitle;
+          this.printSetting.printEntryDate = result.printEntryDate;
+          this.printSetting.printScore = result.printScore;
+          this.printSetting.printAnswer = result.printAnswer;
+          this.printSetting.printHintOfAnswer = result.printHintOfAnswer;
+          this.printSetting.hideLabelOfQuestionType = result.hideLabelOfQuestionType;
+          this.printSetting.shuffleOptionsInSelection = result.shuffleOptionsInSelection;
+
+          this.onPreviewCore();
+        }
+      });
+  }
+
+  private onPreviewCore() {
+    // Renumber on shallow copies: selection.selected holds the very row
+    // objects cached by LearningContentService per fileUrl, and mutating
+    // their `order` in place would leak into later visits of the same file
+    // (the list renders `order`-independent columns but exercises consume
+    // the cached rows directly).
+    const narr = this.selection.selected.map((item, index) => {
+      const copy = { ...item, order: index + 1 };
+      // For reading comprehension, listening comprehension and cloze
+      // They have sub items
+      if (copy.items && copy.items.length > 0) {
+        copy.items = copy.items.map((sbitem, sbindex) => ({ ...sbitem, order: sbindex + 1 }));
+      }
+      return copy;
+    });
+
+    this.uiService.setSelectedExerciseItem(
+      narr,
+      this.printSetting,
+      this.selectedFile()?.includeLatex ?? false,
+      this.currentImageBaseUrl
+    );
+    void this.router.navigate(['/knowledge/displayv2']);
+  }
+
+  // ── Detail / Extra Info screens ─────────────────────────────────
+
+  onShowExtraInfo(elemid: string) {
+    this.selectedElementIdx = this.getVisibleData().findIndex(item => item.id === elemid);
+    if (this.selectedElementIdx !== -1) {
+      // Only switch views once the element is actually found — otherwise the
+      // detail view would open on the stale previously-selected element.
+      this.mode.set('extrainfo');
+      this.setSelectedElement();
+    }
+  }
+
+  onShowDetail(elemid: string) {
+    // Show the detail of the element
+    this.selectedElementIdx = this.getVisibleData().findIndex(item => item.id === elemid);
+    if (this.selectedElementIdx !== -1) {
+      this.mode.set('detail');
+      this.setSelectedElement();
+    }
+  }
+
+  setSelectedElement() {
+    if (this.selectedElementIdx === undefined) {
+      return;
+    }
+    this.selectedElement = convertToQuestionBankItem(this.getVisibleData()[this.selectedElementIdx]);
+    const hideLabelOfQuestionType: QuestionBankTypeKeys[] = [
+      QuestionBankTypeEnum.SingleChoice,
+    ];
+    this.markdownStr = convertQuestionBankItemToMarkdown(
+      this.selectedElement,
+      hideLabelOfQuestionType
+    );
+    this.answerMarkdownStr =
+      this.selectedElement?.getAnswers()?.join(';').replaceAll(' ', '&nbsp;') ?? '';
+    this.hintOfAnswerMarkdownStr = this.buildHintMarkdown(this.selectedElement);
+  }
+
+  private buildHintMarkdown(item?: QuestionBankItemBase<string>): string {
+    if (!item) {
+      return '';
+    }
+    // For composite types, format each sub-item's hint with order prefix
+    const items = item.items;
+    if (items && items.length > 0) {
+      const hints = items
+        .filter(subItem => subItem.hasHintOfAnswer())
+        .map(subItem => {
+          const hint = subItem.getHintsOfAnswer();
+          const hintText = hint.length > 0 ? hint[0].hint : '';
+          return `*${subItem.order}*. ${hintText}`;
+        });
+      return hints.join('<br>');
+    }
+    // For simple types, return own hint
+    return item.hintofanswer ? String(item.hintofanswer) : '';
+  }
+
+  getExtraInfoMarkdown(): string {
+    if (!this.selectedElement?.extraInfo) {
+      return '';
+    }
+    return Array.isArray(this.selectedElement.extraInfo)
+      ? this.selectedElement.extraInfo.join('\n\n')
+      : String(this.selectedElement.extraInfo);
+  }
+
+  onBackToList() {
+    this.showDetailAnswer = false;
+    this.showDetailHintOfAnswer = false;
+    this.hintOfAnswerMarkdownStr = '';
+    this.mode.set('list');
+  }
+
+  onPreviousItem() {
+    if (this.selectedElementIdx === undefined) {
+      return;
+    }
+    this.selectedElementIdx = this.selectedElementIdx - 1;
+    this.setSelectedElement();
+    this.hintOfAnswerMarkdownStr = '';
+    this.showDetailHintOfAnswer = false;
+    // Like the hint flags, the answer panel is per-item: leaving it open
+    // would show the previous item's answer toggle state on the new item.
+    this.showDetailAnswer = false;
+  }
+
+  onNextItem() {
+    if (this.selectedElementIdx === undefined) {
+      return;
+    }
+    this.selectedElementIdx = this.selectedElementIdx + 1;
+    this.setSelectedElement();
+    this.hintOfAnswerMarkdownStr = '';
+    this.showDetailHintOfAnswer = false;
+    this.showDetailAnswer = false;
+  }
+
+  onToggleAnswer() {
+    this.showDetailAnswer = !this.showDetailAnswer;
+  }
+  onToggleHintOfAnswer() {
+    this.showDetailHintOfAnswer = !this.showDetailHintOfAnswer;
+  }
+}
diff --git a/src/app/pages/knowledge-exercises/knowledge-exercises.routers.ts b/src/app/pages/knowledge-exercises/knowledge-exercises.routers.ts
index 7c0ccb0..20f8ff6 100644
--- a/src/app/pages/knowledge-exercises/knowledge-exercises.routers.ts
+++ b/src/app/pages/knowledge-exercises/knowledge-exercises.routers.ts
@@ -1,12 +1,12 @@
 import type { Routes } from '@angular/router';
 
 import { KnowledgeExercisesDetailV2Component } from './knowledge-exercises-detail-v2';
-import { KnowledgeExercisesListComponent } from './knowledge-exercises-list';
+import { KnowledgeExercisesComponent } from './knowledge-exercises-list';
 
 export const KNOWLEDGE_EXERCISES_ROUTES: Routes = [
   {
     path: '',
-    component: KnowledgeExercisesListComponent
+    component: KnowledgeExercisesComponent
   },
   {
     path: 'displayv2',
diff --git a/src/app/pages/translate-exercises/translate-exercises-info-dialog.component.ts b/src/app/pages/translate-exercises/translate-exercises-info-dialog.component.ts
new file mode 100644
index 0000000..547e091
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-info-dialog.component.ts
@@ -0,0 +1,41 @@
+import { Component, Inject, inject } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import { MarkdownContentComponent } from '../../shared/markdown-content';
+
+@Component({
+  selector: 'app-translate-exercises-info-dlg',
+  templateUrl: './translate-exercises-info-dialog.html',
+  imports: [
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MarkdownContentComponent,
+    TranslocoModule,
+  ],
+})
+export class TranslateExercisesInfoDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<TranslateExercisesInfoDialogComponent>);
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      /** i18n key of the dialog title (e.g. translateExercises.explanation). */
+      titleKey: string;
+      content: string;
+    }
+  ) {}
+
+  onCloseClick(): void {
+    this.dialogRef.close();
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-info-dialog.html b/src/app/pages/translate-exercises/translate-exercises-info-dialog.html
index 8856afc..7ba2302 100644
--- a/src/app/pages/translate-exercises/translate-exercises-info-dialog.html
+++ b/src/app/pages/translate-exercises/translate-exercises-info-dialog.html
@@ -1,5 +1,5 @@
 <div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('translateExercises.extraInfoTitle') }}</h2>
+  <h2 mat-dialog-title>{{ t(data.titleKey) }}</h2>
   <mat-dialog-content class="mat-typography">
     <app-markdown-content [markdown]="data.content" [enableMath]="false"></app-markdown-content>
   </mat-dialog-content>
diff --git a/src/app/pages/translate-exercises/translate-exercises-llm-dialog.component.ts b/src/app/pages/translate-exercises/translate-exercises-llm-dialog.component.ts
new file mode 100644
index 0000000..6dce5e4
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-llm-dialog.component.ts
@@ -0,0 +1,93 @@
+import { Component, Inject, DestroyRef, inject, model } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+
+import { TranslationAIModeEnum } from '../../interfaces';
+import { AIService } from '../../services';
+
+@Component({
+  selector: 'app-translate-exercises-llm-dlg',
+  templateUrl: './translate-exercises-llm-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatSelectModule,
+    MatDialogContent,
+    MatDialogActions,
+    TranslocoModule,
+  ],
+})
+export class TranslateExercisesLLMDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<TranslateExercisesLLMDialogComponent>);
+  readonly mode = model(TranslationAIModeEnum.Explain);
+  readonly trans = model('');
+  readonly aireply = model('');
+  readonly transloco = inject(TranslocoService);
+  readonly aiutil = inject(AIService);
+  private readonly destroyRef = inject(DestroyRef);
+  allAIModes = [{ value: TranslationAIModeEnum.Explain }, { value: TranslationAIModeEnum.Correct }];
+
+  getAIModeName(mode: TranslationAIModeEnum): string {
+    switch (mode) {
+      case TranslationAIModeEnum.Explain:
+        return this.transloco.translate('explain');
+      default:
+        return this.transloco.translate('translateExercises.correct');
+    }
+  }
+
+  get isTranslationModeCorrection(): boolean {
+    return this.mode() === TranslationAIModeEnum.Correct;
+  }
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: { orgsent: string }) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onSubmit(): void {
+    if (this.mode() === TranslationAIModeEnum.Explain) {
+      this.aiutil
+        .explainSentence(`请从词汇、语法角度讲解一下'${this.data.orgsent}'，返回长度控制在100字。`)
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          next: (data: any) => {
+            this.aireply.set(data.content);
+          },
+          error: err => {
+            console.error(err);
+          },
+        });
+    } else if (this.mode() === TranslationAIModeEnum.Correct) {
+      this.aiutil
+        .explainSentence(
+          `英文原文：'${this.data.orgsent}'，我的翻译为'${this.trans()}', 请从词汇语法角度分析翻译是否正确。返回长度控制在100字。`
+        )
+        .pipe(takeUntilDestroyed(this.destroyRef))
+        .subscribe({
+          next: (data: any) => {
+            this.aireply.set(data.content);
+          },
+          error: err => {
+            console.error(err);
+          },
+        });
+    }
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-options-dialog.component.ts b/src/app/pages/translate-exercises/translate-exercises-options-dialog.component.ts
new file mode 100644
index 0000000..a7dc2f4
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-options-dialog.component.ts
@@ -0,0 +1,84 @@
+import { Component, Inject, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+
+import type { TranslateExerciseOption } from '../../interfaces';
+import { TranslateDirectionEnum } from '../../interfaces';
+
+@Component({
+  selector: 'app-translate-exercises-options-dlg',
+  templateUrl: './translate-exercises-options-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatSelectModule,
+    MatDialogContent,
+    MatDialogActions,
+    TranslocoModule,
+  ],
+})
+export class TranslateExercisesOptionsDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<TranslateExercisesOptionsDialogComponent>);
+  readonly transloco = inject(TranslocoService);
+
+  readonly allDirections = [
+    { value: TranslateDirectionEnum.ChineseToEnglish },
+    { value: TranslateDirectionEnum.EnglishToChinese },
+  ];
+
+  // Reopening shows the last picks (currentSettings); with an active table
+  // selection the count is pinned to the selection size.
+  readonly countOfItems = model(
+    this.data.withSelection
+      ? this.data.reciteQueuesCount
+      : (this.data.currentSettings?.countOfItems ?? 20)
+  );
+  readonly direction = model(this.data.currentSettings?.direction ?? TranslateDirectionEnum.EnglishToChinese);
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      reciteQueuesCount: number;
+      withSelection: boolean;
+      currentSettings?: TranslateExerciseOption;
+    }
+  ) {}
+
+  getDirectionName(dir: TranslateDirectionEnum): string {
+    switch (dir) {
+      case TranslateDirectionEnum.ChineseToEnglish:
+        return this.transloco.translate('translateExercises.chineseToEnglish');
+      default:
+        return this.transloco.translate('translateExercises.englishToChinese');
+    }
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onYesClick(): void {
+    const closedata: TranslateExerciseOption = {
+      countOfItems: this.countOfItems(),
+      direction: this.direction(),
+    };
+
+    this.dialogRef.close(closedata);
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-options-dialog.html b/src/app/pages/translate-exercises/translate-exercises-options-dialog.html
index da74f86..d763f1f 100644
--- a/src/app/pages/translate-exercises/translate-exercises-options-dialog.html
+++ b/src/app/pages/translate-exercises/translate-exercises-options-dialog.html
@@ -4,8 +4,8 @@ <h2 mat-dialog-title>{{ t('translateExercises.options') }}</h2>
     <mat-form-field class="control-full-width">
       <mat-label>{{ t('direction') }}</mat-label>
       <mat-select matNativeControl [(value)]="direction">
-        @for (lvl of data.allDirections; track lvl.value ) {
-          <mat-option [value]="lvl.value">{{data.getDirectionName(lvl.value)}}</mat-option>
+        @for (lvl of allDirections; track lvl.value ) {
+          <mat-option [value]="lvl.value">{{getDirectionName(lvl.value)}}</mat-option>
         }
       </mat-select>
     </mat-form-field>
@@ -14,9 +14,6 @@ <h2 mat-dialog-title>{{ t('translateExercises.options') }}</h2>
       <input matInput type="number" [(ngModel)]="countOfItems" [disabled]="data.withSelection" />
       <span matSuffix>{{data.reciteQueuesCount}}</span>
     </mat-form-field>
-    <div class="control-full-width">
-      <mat-checkbox [(ngModel)]="allowEmptyAnswer">{{ t('translateExercises.allowEmptyAnswer') }}</mat-checkbox>
-    </div>
   </mat-dialog-content>
   <mat-dialog-actions>
     <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
diff --git a/src/app/pages/translate-exercises/translate-exercises-printoptions-dialog.component.ts b/src/app/pages/translate-exercises/translate-exercises-printoptions-dialog.component.ts
new file mode 100644
index 0000000..6c880dd
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-printoptions-dialog.component.ts
@@ -0,0 +1,105 @@
+import { Component, Inject, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatDatepickerModule } from '@angular/material/datepicker';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import { zhCN } from 'date-fns/locale';
+
+import type { TranslateExercisePrintOption } from '../../interfaces';
+import {
+  TranslateDirectionEnum,
+  MY_DATE_FORMATS,
+  getAllPrintExecDateString,
+} from '../../interfaces';
+import { MatDateFnsModule, provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
+
+@Component({
+  selector: 'app-translate-exercises-printoptions-dlg',
+  templateUrl: './translate-exercises-printoptions-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    MatInputModule,
+    FormsModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatSelectModule,
+    MatDialogActions,
+    MatDatepickerModule,
+    MatDateFnsModule,
+    TranslocoModule,
+  ],
+  providers: [
+    provideDateFnsAdapter(),
+    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
+    { provide: MAT_DATE_LOCALE, useValue: zhCN },
+  ],
+})
+export class TranslateExercisesPrintOptionsDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<TranslateExercisesPrintOptionsDialogComponent>);
+  readonly transloco = inject(TranslocoService);
+
+  readonly allDirections = [
+    { value: TranslateDirectionEnum.ChineseToEnglish },
+    { value: TranslateDirectionEnum.EnglishToChinese },
+  ];
+
+  readonly countOfItems = model(this.data.withSelection ? this.data.reciteQueuesCount : 20);
+  readonly printAnswer = model(false);
+  readonly printWord = model(false);
+  readonly direction = model(TranslateDirectionEnum.EnglishToChinese);
+  readonly printEntryDate = model(true);
+  readonly selectedExecDateModel = model<number>(0);
+  readonly execDate = model(new Date());
+
+  readonly allPrintExecDates = getAllPrintExecDateString();
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      reciteQueuesCount: number;
+      withSelection: boolean;
+    }
+  ) {}
+
+  getDirectionName(dir: TranslateDirectionEnum): string {
+    switch (dir) {
+      case TranslateDirectionEnum.ChineseToEnglish:
+        return this.transloco.translate('translateExercises.chineseToEnglish');
+      default:
+        return this.transloco.translate('translateExercises.englishToChinese');
+    }
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  onYesClick(): void {
+    const closedata: TranslateExercisePrintOption = {
+      printAnswer: this.printAnswer(),
+      printWord: this.printWord(),
+      countOfItems: this.countOfItems(),
+      direction: this.direction(),
+      printEntryDate: this.printEntryDate(),
+      respectRetentionCurve: this.selectedExecDateModel() === 1 ? true : false,
+      printExecDate: this.selectedExecDateModel() === 2 ? true : false,
+      execDate: this.selectedExecDateModel() === 2 ? this.execDate() : undefined,
+    };
+
+    this.dialogRef.close(closedata);
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-printoptions-dialog.html b/src/app/pages/translate-exercises/translate-exercises-printoptions-dialog.html
index 2bcedea..40de55e 100644
--- a/src/app/pages/translate-exercises/translate-exercises-printoptions-dialog.html
+++ b/src/app/pages/translate-exercises/translate-exercises-printoptions-dialog.html
@@ -4,8 +4,8 @@ <h2 mat-dialog-title>{{ t('optionsOfPrinting') }}</h2>
     <mat-form-field class="control-full-width">
       <mat-label>{{ t('direction') }}</mat-label>
       <mat-select matNativeControl [(ngModel)]="direction">
-        @for (lvl of data.allDirections; track $index) {
-          <mat-option [value]="lvl.value">{{data.getDirectionName(lvl.value)}}</mat-option>
+        @for (lvl of allDirections; track $index) {
+          <mat-option [value]="lvl.value">{{getDirectionName(lvl.value)}}</mat-option>
         }
       </mat-select>
     </mat-form-field>
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.html b/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.html
new file mode 100644
index 0000000..4357b86
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.html
@@ -0,0 +1,30 @@
+<ng-container *transloco="let t">
+  <div class="container">
+    <div class="result-header">{{ t('common.score') }}: {{store.correctCount()}} / {{store.questions().length }} </div>
+    <button mat-raised-button color="primary" (click)="backToList.emit()">{{ t('backToList') }}</button>
+
+    <table mat-table [dataSource]="store.results()" class="mat-elevation-z8 w-full">
+      <!-- English Sentence Column -->
+      <ng-container matColumnDef="ensent">
+        <th mat-header-cell *matHeaderCellDef> {{ t('english') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.ensent}} </td>
+      </ng-container>
+
+      <!-- Chinese Sentence Column -->
+      <ng-container matColumnDef="cnsent">
+        <th mat-header-cell *matHeaderCellDef> {{ t('chinese') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.cnsent}} </td>
+      </ng-container>
+
+      <!-- Correct Column -->
+      <ng-container matColumnDef="correct">
+        <th mat-header-cell *matHeaderCellDef> {{ t('common.correct') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-checkbox [checked]="element.correct" [disabled]="true"></mat-checkbox>
+        </td>
+      </ng-container>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+</ng-container>
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.scss b/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.scss
new file mode 100644
index 0000000..fbb4a99
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.scss
@@ -0,0 +1,26 @@
+// See word-list: the host replaces blocks that were direct flex items.
+:host {
+    display: contents;
+}
+
+.container {
+    width: 100%;
+    box-sizing: border-box;
+    padding: 16px 24px 24px;
+}
+
+// Score line rendered as a centered section header above the result table.
+.result-header {
+    margin: 0 0 16px;
+    text-align: center;
+    font-size: 22px;
+    font-weight: 500;
+    line-height: 1.4;
+    color: var(--mat-sys-on-surface, rgba(0, 0, 0, 0.87));
+}
+
+// Spacing between the back button and the result table so the table's sticky
+// header and elevation shadow no longer overlap the button.
+.container > button {
+    margin-bottom: 16px;
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.spec.ts b/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.spec.ts
new file mode 100644
index 0000000..d93db7e
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.spec.ts
@@ -0,0 +1,85 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
+} from '@jsverse/transloco';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import type { SentenceQuizQuestion } from '../../interfaces';
+import { AudioService } from '../../services';
+
+import { TranslateExercisesQuizResultComponent } from './translate-exercises-quiz-result.component';
+import { TranslateQuizSessionStore } from './translate-exercises-quiz-session.store';
+
+describe('TranslateExercisesQuizResultComponent', () => {
+  let component: TranslateExercisesQuizResultComponent;
+  let fixture: ComponentFixture<TranslateExercisesQuizResultComponent>;
+  let store: TranslateQuizSessionStore;
+
+  const q = (prompt: string, answerIndex: number): SentenceQuizQuestion => ({
+    ensent: 'EN ' + prompt,
+    cnsent: 'CN ' + prompt,
+    prompt,
+    options: ['opt1', 'opt2'],
+    answerIndex,
+  });
+
+  beforeEach(async () => {
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesQuizResultComponent, NoopAnimationsModule],
+      providers: [
+        TranslateQuizSessionStore,
+        { provide: AudioService, useValue: { playSound: vi.fn() } },
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslateExercisesQuizResultComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(TranslateQuizSessionStore);
+    store.start([q('q1', 0), q('q2', 0)]);
+    store.answer(0);
+    store.next();
+    store.answer(1);
+    store.next();
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('renders the score and per-sentence results', () => {
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.textContent).toContain('1 / 2');
+    expect(el.textContent).toContain('EN q1');
+    expect(el.textContent).toContain('CN q2');
+  });
+
+  it('emits backToList from the back button', () => {
+    const spy = vi.spyOn(component.backToList, 'emit');
+    const btn = (fixture.nativeElement as HTMLElement).querySelector('button');
+    btn?.click();
+
+    expect(spy).toHaveBeenCalled();
+  });
+});
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.ts b/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.ts
new file mode 100644
index 0000000..b92785d
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-result.component.ts
@@ -0,0 +1,31 @@
+import { ChangeDetectionStrategy, Component, inject, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTableModule } from '@angular/material/table';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import { TranslateQuizSessionStore } from './translate-exercises-quiz-session.store';
+
+/**
+ * Quiz-result screen of the sentence page: the score line and the
+ * per-sentence correctness table, both read from the shared session store.
+ */
+@Component({
+  selector: 'app-translate-exercises-quiz-result',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatButtonModule,
+    MatCheckboxModule,
+    MatTableModule,
+    TranslocoModule,
+  ],
+  templateUrl: './translate-exercises-quiz-result.component.html',
+  styleUrl: './translate-exercises-quiz-result.component.scss',
+})
+export class TranslateExercisesQuizResultComponent {
+  protected readonly store = inject(TranslateQuizSessionStore);
+
+  readonly backToList = output<void>();
+
+  displayedColumns: string[] = ['ensent', 'cnsent', 'correct'];
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.html b/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.html
new file mode 100644
index 0000000..a45b9a4
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.html
@@ -0,0 +1,56 @@
+<ng-container *transloco="let t">
+  <mat-toolbar class="container">
+    <mat-toolbar-row>
+      <section>
+        <div class="example-button-container">
+          <mat-progress-bar mode="determinate" [value]="store.progress()"></mat-progress-bar>
+        </div>
+      </section>
+      <span class="toolbar-spacer"></span>
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.previousQuestion')"
+        [attr.aria-label]="t('common.previousQuestion')"
+        (click)="store.previous()" [disabled]="store.isPreviousDisabled()">
+        <mat-icon>arrow_left</mat-icon>
+      </button>
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.nextQuestion')"
+        [attr.aria-label]="t('common.nextQuestion')"
+        (click)="store.next()" [disabled]="!store.isAnswered()">
+        <mat-icon>arrow_right</mat-icon>
+      </button>
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.quit')"
+        [attr.aria-label]="t('common.quit')" (click)="quit.emit()">
+        <mat-icon>cancel_presentation</mat-icon>
+      </button>
+    </mat-toolbar-row>
+  </mat-toolbar>
+  <div class="sentence-quiz-container">
+    <div class="sentence-quiz-prompt">
+      {{ store.isAnswered() ? store.currentQuestion()?.ensent : store.currentQuestion()?.prompt }}
+    </div>
+    <div class="sentence-quiz-hint">
+      {{ store.currentQuestion()?.cnsent }}
+    </div>
+
+    <div class="sentence-quiz-options">
+      @for (option of store.currentQuestion()?.options ?? []; track $index; let i = $index) {
+        <button mat-stroked-button class="sentence-quiz-option" (click)="store.answer(i)"
+          [class.sentence-quiz-option-correct]="store.isAnswered() && i === store.currentQuestion()?.answerIndex"
+          [class.sentence-quiz-option-wrong]="store.isAnswered() && i === store.selectedIndex() && i !== store.currentQuestion()?.answerIndex">
+          <span class="sentence-quiz-option-key">{{ optionKeys[i] }}</span>
+          <span class="sentence-quiz-option-text">{{ option }}</span>
+          @if (store.isAnswered() && i === store.currentQuestion()?.answerIndex) {
+            <mat-icon class="sentence-quiz-option-icon" aria-hidden="true">check_circle</mat-icon>
+          }
+          @if (store.isAnswered() && i === store.selectedIndex() && i !== store.currentQuestion()?.answerIndex) {
+            <mat-icon class="sentence-quiz-option-icon" aria-hidden="true">cancel</mat-icon>
+          }
+        </button>
+      }
+    </div>
+    @if (store.isAnswered()) {
+      <div class="sentence-quiz-status" role="status" aria-live="polite">
+        {{ store.isCorrect() ? t('common.correct') : t('common.incorrect') }}
+      </div>
+    }
+  </div>
+</ng-container>
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.scss b/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.scss
new file mode 100644
index 0000000..269a777
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.scss
@@ -0,0 +1,102 @@
+// See word-list: the host replaces blocks that were direct flex items.
+:host {
+    display: contents;
+}
+
+.toolbar-spacer {
+    flex: 1 1 auto;
+}
+
+.toolbar-fab-button {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+.example-button-container {
+    display: flex;
+    justify-content: center;
+    width: 56px;
+}
+
+.sentence-quiz-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    width: 100%;
+}
+
+.sentence-quiz-prompt {
+    font-size: 48px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 80px;
+    margin: 24px 0;
+    width: 100%;
+    word-break: break-word;
+}
+
+.sentence-quiz-hint {
+    font-size: 24px;
+    opacity: 0.65;
+    text-align: center;
+    margin: 0 0 24px;
+    width: 100%;
+    word-break: break-word;
+}
+
+.sentence-quiz-options {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+    max-width: 640px;
+    padding: 0 16px 24px;
+    box-sizing: border-box;
+}
+
+.sentence-quiz-option {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    height: auto;
+    min-height: 48px;
+    padding: 8px 16px;
+    text-align: left;
+
+    .sentence-quiz-option-key {
+        margin-right: 16px;
+        font-weight: bold;
+        flex-shrink: 0;
+    }
+
+    .sentence-quiz-option-text {
+        white-space: pre-wrap;
+        word-break: break-word;
+        flex: 1 1 auto;
+    }
+
+    .sentence-quiz-option-icon {
+        margin-left: auto;
+        flex-shrink: 0;
+    }
+
+    &.sentence-quiz-option-correct {
+        border-color: #4caf50;
+        color: #4caf50;
+    }
+
+    &.sentence-quiz-option-wrong {
+        border-color: #f44336;
+        color: #f44336;
+    }
+}
+
+.sentence-quiz-status {
+    margin-top: 8px;
+    font-size: 18px;
+    font-weight: 500;
+    text-align: center;
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.spec.ts b/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.spec.ts
new file mode 100644
index 0000000..7809d1a
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.spec.ts
@@ -0,0 +1,112 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
+} from '@jsverse/transloco';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import type { SentenceQuizQuestion } from '../../interfaces';
+import { AudioService } from '../../services';
+
+import { TranslateExercisesQuizSessionComponent } from './translate-exercises-quiz-session.component';
+import { TranslateQuizSessionStore } from './translate-exercises-quiz-session.store';
+
+describe('TranslateExercisesQuizSessionComponent', () => {
+  let component: TranslateExercisesQuizSessionComponent;
+  let fixture: ComponentFixture<TranslateExercisesQuizSessionComponent>;
+  let store: TranslateQuizSessionStore;
+
+  const q = (prompt: string, answerIndex: number): SentenceQuizQuestion => ({
+    ensent: 'EN ' + prompt,
+    cnsent: 'CN ' + prompt,
+    prompt,
+    options: ['opt1', 'opt2', 'opt3'],
+    answerIndex,
+  });
+
+  beforeEach(async () => {
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesQuizSessionComponent, NoopAnimationsModule],
+      providers: [
+        TranslateQuizSessionStore,
+        { provide: AudioService, useValue: { playSound: vi.fn() } },
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslateExercisesQuizSessionComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(TranslateQuizSessionStore);
+    store.start([q('prompt one', 1)]);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the current prompt and options', () => {
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.textContent).toContain('prompt one');
+    expect(el.textContent).toContain('opt1');
+    expect(el.textContent).toContain('A');
+    expect(el.textContent).toContain('C');
+  });
+
+  it('shows the answer feedback once answered', () => {
+    store.answer(1);
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.textContent).toContain('common.correct');
+    expect(el.querySelector('.sentence-quiz-option-correct')).toBeTruthy();
+  });
+
+  it('renders the Chinese hint line', () => {
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.querySelector('.sentence-quiz-hint')?.textContent).toContain('CN prompt one');
+  });
+
+  it('shows the full sentence in place of the cloze once answered', () => {
+    store.answer(1);
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.querySelector('.sentence-quiz-prompt')?.textContent).toContain('EN prompt one');
+  });
+
+  it('forwards answer keys to the store', () => {
+    component.handleKeyboardEvent(new KeyboardEvent('keyup', { key: '2' }));
+    expect(store.selectedIndex()).toBe(1);
+  });
+
+  it('does not forward Enter pressed on a focused button', () => {
+    store.answer(1);
+    const nextSpy = vi.spyOn(store, 'next');
+
+    const event = new KeyboardEvent('keyup', { key: 'Enter' });
+    vi.spyOn(event, 'target', 'get').mockReturnValue(document.createElement('button'));
+    component.handleKeyboardEvent(event);
+
+    expect(nextSpy).not.toHaveBeenCalled();
+  });
+});
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.ts b/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.ts
new file mode 100644
index 0000000..f10f5cf
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-session.component.ts
@@ -0,0 +1,63 @@
+import { ChangeDetectionStrategy, Component, HostListener, inject, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import { TranslateQuizSessionStore } from './translate-exercises-quiz-session.store';
+
+/**
+ * Quiz screen of the sentence (translation) exercises page: progress bar, the
+ * current single-choice question (prompt + A-D option buttons with answer
+ * feedback) and the next/quit controls. All quiz state lives in the injected
+ * session store; this component renders it and owns the keyboard listener, so
+ * keystroke handling is registered only while the quiz screen is alive (the
+ * container's @switch destroys it).
+ */
+@Component({
+  selector: 'app-translate-exercises-quiz-session',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatToolbarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatProgressBarModule,
+    MatTooltipModule,
+    TranslocoModule,
+  ],
+  templateUrl: './translate-exercises-quiz-session.component.html',
+  styleUrl: './translate-exercises-quiz-session.component.scss',
+})
+export class TranslateExercisesQuizSessionComponent {
+  protected readonly store = inject(TranslateQuizSessionStore);
+
+  readonly quit = output<void>();
+
+  /** Option labels shown in front of each answer candidate. */
+  readonly optionKeys = ['A', 'B', 'C', 'D'];
+
+  /**
+   * Quiz input: forward answer/advance keys to the store, nothing else.
+   * Browser/app chords are never quiz input, and Enter/Space on a focused
+   * button already activated that button on keydown (answered the option /
+   * advanced) — forwarding the keyup would act a second time, e.g. Enter on
+   * an option would answer AND skip straight past the answer feedback.
+   */
+  @HostListener('document:keyup', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return;
+    }
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      const target = event.target as HTMLElement | null;
+      if (target?.closest('button')) {
+        return;
+      }
+    }
+
+    this.store.handleKey(event.key);
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-session.store.spec.ts b/src/app/pages/translate-exercises/translate-exercises-quiz-session.store.spec.ts
new file mode 100644
index 0000000..d7141f1
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-session.store.spec.ts
@@ -0,0 +1,249 @@
+import { TestBed } from '@angular/core/testing';
+
+import type { SentenceQuizQuestion } from '../../interfaces';
+import { AudioService } from '../../services';
+
+import { TranslateQuizSessionStore } from './translate-exercises-quiz-session.store';
+
+describe('TranslateQuizSessionStore', () => {
+  let store: TranslateQuizSessionStore;
+  let mockAudioService: { playSound: ReturnType<typeof vi.fn> };
+
+  const question = (prompt: string, options: string[], answerIndex: number): SentenceQuizQuestion => ({
+    ensent: 'EN ' + prompt,
+    cnsent: 'CN ' + prompt,
+    prompt,
+    options,
+    answerIndex,
+  });
+
+  beforeEach(() => {
+    mockAudioService = { playSound: vi.fn() };
+
+    TestBed.configureTestingModule({
+      providers: [
+        TranslateQuizSessionStore,
+        { provide: AudioService, useValue: mockAudioService },
+      ],
+    });
+    store = TestBed.inject(TranslateQuizSessionStore);
+  });
+
+  describe('start', () => {
+    it('returns false and stays reset for an empty queue', () => {
+      expect(store.start([])).toBe(false);
+
+      expect(store.questions()).toEqual([]);
+      expect(store.progress()).toBe(100);
+    });
+
+    it('builds the question queue and resets all per-question state', () => {
+      const questions = [
+        question('q1', ['a', 'b', 'c', 'd'], 0),
+        question('q2', ['a', 'b', 'c', 'd'], 1),
+      ];
+
+      expect(store.start(questions)).toBe(true);
+
+      expect(store.questions().length).toBe(2);
+      expect(store.currentIndex()).toBe(0);
+      expect(store.selectedIndex()).toBe(-1);
+      expect(store.isAnswered()).toBe(false);
+      expect(store.results().length).toBe(2);
+      expect(store.results().every(r => r.correct)).toBe(true);
+      expect(store.progress()).toBe(0);
+      expect(store.currentQuestion()?.prompt).toBe('q1');
+    });
+  });
+
+  describe('answer', () => {
+    beforeEach(() => {
+      store.start([
+        question('q1', ['a', 'b', 'c', 'd'], 2),
+      ]);
+    });
+
+    it('records a correct pick', () => {
+      store.answer(2);
+
+      expect(store.selectedIndex()).toBe(2);
+      expect(store.isCorrect()).toBe(true);
+      expect(store.results()[0].correct).toBe(true);
+      expect(mockAudioService.playSound).toHaveBeenCalledWith('correct.wav');
+    });
+
+    it('records a wrong pick', () => {
+      store.answer(0);
+
+      expect(store.isCorrect()).toBe(false);
+      expect(store.results()[0].correct).toBe(false);
+      expect(mockAudioService.playSound).toHaveBeenCalledWith('beep.wav');
+    });
+
+    it('ignores re-answers', () => {
+      store.answer(2);
+      store.answer(0);
+
+      expect(store.selectedIndex()).toBe(2);
+      expect(mockAudioService.playSound).toHaveBeenCalledTimes(1);
+    });
+
+    it('ignores out-of-range picks', () => {
+      store.answer(9);
+
+      expect(store.isAnswered()).toBe(false);
+    });
+  });
+
+  describe('navigation', () => {
+    beforeEach(() => {
+      store.start([
+        question('q1', ['a', 'b'], 0),
+        question('q2', ['a', 'b'], 1),
+      ]);
+    });
+
+    it('next requires an answer first', () => {
+      store.next();
+
+      expect(store.currentIndex()).toBe(0);
+    });
+
+    it('next moves through the queue once answered', () => {
+      store.answer(0);
+      store.next();
+
+      expect(store.currentIndex()).toBe(1);
+      expect(store.progress()).toBe(50);
+    });
+
+    it('answering the last question completes the session', () => {
+      store.answer(0);
+      store.next();
+      store.answer(1);
+      store.next();
+
+      expect(store.isComplete()).toBe(true);
+      expect(store.currentIndex()).toBe(-1);
+      expect(store.progress()).toBe(100);
+    });
+
+    it('previous moves back to review an answered question', () => {
+      store.answer(0);
+      store.next();
+      store.previous();
+
+      expect(store.currentIndex()).toBe(0);
+      expect(store.isPreviousDisabled()).toBe(true);
+      // The pick is preserved on the answered question.
+      expect(store.selectedIndex()).toBe(0);
+    });
+
+    it('previous is a no-op on the first question', () => {
+      store.previous();
+
+      expect(store.currentIndex()).toBe(0);
+    });
+  });
+
+  describe('handleKey', () => {
+    beforeEach(() => {
+      store.start([
+        question('q1', ['a', 'b', 'c'], 1),
+      ]);
+    });
+
+    it.each(['1', '2', '3', '4', 'a', 'b', 'c', 'd'])('maps option key %s', key => {
+      const keys = ['1', '2', '3', '4', 'a', 'b', 'c', 'd'];
+      const optionIndex = keys.indexOf(key) % 4;
+      // The question has 3 options; out-of-range picks are ignored.
+      const expected = optionIndex < 3 ? optionIndex : -1;
+
+      store.handleKey(key);
+
+      expect(store.selectedIndex()).toBe(expected);
+    });
+
+    it('is case-insensitive for letter keys', () => {
+      store.handleKey('B');
+
+      expect(store.selectedIndex()).toBe(1);
+    });
+
+    it('advances with Enter after answering', () => {
+      store.answer(1);
+      store.handleKey('Enter');
+
+      expect(store.isComplete()).toBe(true);
+    });
+
+    it('does not advance with Enter before answering', () => {
+      store.handleKey('Enter');
+
+      expect(store.isComplete()).toBe(false);
+      expect(store.currentIndex()).toBe(0);
+    });
+
+    it('advances with ArrowRight after answering', () => {
+      store.start([
+        question('q1', ['a', 'b'], 0),
+        question('q2', ['a', 'b'], 1),
+      ]);
+      store.answer(0);
+      store.handleKey('ArrowRight');
+
+      expect(store.currentIndex()).toBe(1);
+    });
+
+    it('moves back with ArrowLeft', () => {
+      store.start([
+        question('q1', ['a', 'b'], 0),
+        question('q2', ['a', 'b'], 1),
+      ]);
+      store.answer(0);
+      store.handleKey('ArrowRight');
+      store.handleKey('ArrowLeft');
+
+      expect(store.currentIndex()).toBe(0);
+    });
+
+    it('ignores unrelated keys', () => {
+      store.handleKey('x');
+
+      expect(store.isAnswered()).toBe(false);
+    });
+  });
+
+  describe('reset', () => {
+    it('clears every piece of session state', () => {
+      store.start([question('q1', ['a', 'b'], 0)]);
+      store.answer(0);
+
+      store.reset();
+
+      expect(store.questions()).toEqual([]);
+      expect(store.results()).toEqual([]);
+      expect(store.currentIndex()).toBe(-1);
+      expect(store.isComplete()).toBe(false);
+    });
+  });
+
+  describe('correctness counts', () => {
+    it('tracks correct and incorrect counts', () => {
+      store.start([
+        question('q1', ['a', 'b'], 0),
+        question('q2', ['a', 'b'], 0),
+        question('q3', ['a', 'b'], 0),
+      ]);
+      store.answer(0);
+      store.next();
+      store.answer(1);
+      store.next();
+      store.answer(0);
+      store.next();
+
+      expect(store.correctCount()).toBe(2);
+      expect(store.incorrectCount()).toBe(1);
+    });
+  });
+});
diff --git a/src/app/pages/translate-exercises/translate-exercises-quiz-session.store.ts b/src/app/pages/translate-exercises/translate-exercises-quiz-session.store.ts
new file mode 100644
index 0000000..74baa28
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quiz-session.store.ts
@@ -0,0 +1,169 @@
+import { Injectable, computed, inject, signal } from '@angular/core';
+
+import type { SentenceQuizQuestion, SentenceQuizQueueResult } from '../../interfaces';
+import { AudioService } from '../../services';
+
+/**
+ * State and behavior of one sentence quiz session: the generated
+ * single-choice question queue, the cursor, the picked option of the current
+ * question, the per-question results, and the answer sounds. Provided on the
+ * page container so the quiz and result screens share one instance; the
+ * container only decides the screen (`mode`) - everything quiz-related lives
+ * here. Mirrors the vocabulary quiz session store.
+ */
+// eslint-disable-next-line @angular-eslint/use-injectable-provided-in -- intentionally NOT root-provided: the page container provides it so the quiz/result screens share one instance scoped to the page
+@Injectable()
+export class TranslateQuizSessionStore {
+  private static readonly OPTION_KEYS = ['1', '2', '3', '4', 'a', 'b', 'c', 'd'];
+
+  private readonly audiosrv = inject(AudioService);
+
+  readonly questions = signal<SentenceQuizQuestion[]>([]);
+  readonly currentIndex = signal(-1);
+  // Per-question picked option index (-1 until that question is answered).
+  // Answers are final - no re-answering - so the pick is kept per question and
+  // `selectedIndex` derives from it: navigating back to an answered question
+  // still shows its pick (and the correct/wrong highlight), not a blank slate.
+  private readonly picks = signal<number[]>([]);
+  /** Index into the current question's options that the user picked; -1 until answered. */
+  readonly selectedIndex = computed(() => {
+    const idx = this.currentIndex();
+    const picks = this.picks();
+    return idx >= 0 && idx < picks.length ? picks[idx] : -1;
+  });
+  readonly results = signal<SentenceQuizQueueResult[]>([]);
+  /** Set when the last question is answered; the container switches to the result screen. */
+  readonly isComplete = signal(false);
+  // Count of questions answered so far (answers are final). Drives progress so
+  // a session reaches 100% on the last answer and a single-question session
+  // does not read 0% throughout.
+  private readonly answeredCount = signal(0);
+
+  /** Progress in percent, measured against the question queue. */
+  readonly progress = computed(() => {
+    const len = this.questions().length;
+    return len === 0 ? 100 : Math.round((this.answeredCount() * 100) / len);
+  });
+
+  /** The question under the cursor (null when the queue is empty). */
+  readonly currentQuestion = computed(() => {
+    const idx = this.currentIndex();
+    const questions = this.questions();
+    return idx >= 0 && idx < questions.length ? questions[idx] : null;
+  });
+
+  /** Whether the current question has been answered (and can be advanced). */
+  readonly isAnswered = computed(() => this.selectedIndex() >= 0);
+
+  /** Whether there is no previous question to go back to. */
+  readonly isPreviousDisabled = computed(() => this.currentIndex() <= 0);
+
+  /** Whether the user's pick on the current question was correct (false until answered). */
+  readonly isCorrect = computed(() => {
+    if (!this.isAnswered()) {
+      return false;
+    }
+    const question = this.currentQuestion();
+    return question ? this.selectedIndex() === question.answerIndex : false;
+  });
+
+  readonly correctCount = computed(() => this.results().filter(r => r.correct).length);
+  readonly incorrectCount = computed(() => this.results().filter(r => !r.correct).length);
+
+  /**
+   * Start a new session over `questions`. Returns false (and stays reset) when
+   * there is nothing to ask, so the caller can keep showing the list.
+   */
+  start(questions: SentenceQuizQuestion[]): boolean {
+    this.reset();
+    if (questions.length === 0) {
+      return false;
+    }
+
+    this.questions.set(questions);
+    this.picks.set(questions.map(() => -1));
+    this.results.set(questions.map(q => ({ ensent: q.ensent, cnsent: q.cnsent, correct: true })));
+    this.currentIndex.set(0);
+    this.answeredCount.set(0);
+    return true;
+  }
+
+  /** Drop every piece of session state (quit mid-session / leave the result screen). */
+  reset(): void {
+    this.questions.set([]);
+    this.results.set([]);
+    this.picks.set([]);
+    this.currentIndex.set(-1);
+    this.isComplete.set(false);
+    this.answeredCount.set(0);
+  }
+
+  /**
+   * Lock in the user's pick for the current question. Out-of-range picks and
+   * re-answers are ignored; the per-question result is recorded and the
+   * matching sound plays.
+   */
+  answer(index: number): void {
+    const question = this.currentQuestion();
+    if (!question || this.isAnswered() || index < 0 || index >= question.options.length) {
+      return;
+    }
+
+    const correct = index === question.answerIndex;
+    const qi = this.currentIndex();
+    this.picks.update(p => p.map((v, i) => (i === qi ? index : v)));
+    this.results.update(rs => rs.map((r, i) => (i === qi ? { ...r, correct } : r)));
+    this.answeredCount.update(c => c + 1);
+    void this.audiosrv.playSound(correct ? 'correct.wav' : 'beep.wav');
+  }
+
+  /** Move to the next question; answering the last one completes the session. */
+  next(): void {
+    if (!this.isAnswered()) {
+      return;
+    }
+
+    const nextIndex = this.currentIndex() + 1;
+    if (nextIndex < this.questions().length) {
+      this.currentIndex.set(nextIndex);
+    } else {
+      // Session over: leave no live answer state behind.
+      this.isComplete.set(true);
+      this.currentIndex.set(-1);
+      void this.audiosrv.playSound('correct.wav');
+    }
+  }
+
+  /** Move back to the previous question to review an already-answered one. */
+  previous(): void {
+    if (this.currentIndex() > 0) {
+      this.currentIndex.set(this.currentIndex() - 1);
+    }
+  }
+
+  /**
+   * Handle one keystroke: 1-4 / A-D pick the matching option, Enter or the
+   * right arrow advances to the next (already answered) question.
+   */
+  handleKey(key: string): void {
+    if (key === 'Enter' || key === 'ArrowRight') {
+      this.next();
+      return;
+    }
+
+    if (key === 'ArrowLeft') {
+      this.previous();
+      return;
+    }
+
+    const idx = TranslateQuizSessionStore.OPTION_KEYS.indexOf(key.toLowerCase());
+    if (idx === -1) {
+      return;
+    }
+    const optionIndex = idx % 4;
+    const question = this.currentQuestion();
+    if (question && optionIndex < question.options.length) {
+      this.answer(optionIndex);
+    }
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-quizoptions-dialog.component.ts b/src/app/pages/translate-exercises/translate-exercises-quizoptions-dialog.component.ts
new file mode 100644
index 0000000..a812236
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quizoptions-dialog.component.ts
@@ -0,0 +1,76 @@
+import { ChangeDetectionStrategy, Component, Inject, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import type { SentenceQuizOption } from '../../interfaces';
+
+@Component({
+  selector: 'app-translate-exercises-quizoptions-dlg',
+  templateUrl: './translate-exercises-quizoptions-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    FormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    TranslocoModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TranslateExercisesQuizOptionsDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<TranslateExercisesQuizOptionsDialogComponent>);
+
+  // Seed from the settings currently applied in the container so reopening
+  // the dialog shows what the user picked last time.
+  readonly countOfItems = model(
+    this.data.withSelection ? this.data.sentenceQueueCount : (this.data.currentSettings?.countOfItems ?? 20)
+  );
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      sentenceQueueCount: number;
+      withSelection: boolean;
+      currentSettings?: SentenceQuizOption;
+    }
+  ) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  /** A cleared / 0 / negative / fractional count would empty or mis-truncate
+   * the queue (the exercise prep slices by it). Require an integer >= 1. */
+  get isCountInvalid(): boolean {
+    const count = this.countOfItems();
+    return !Number.isInteger(count) || count < 1;
+  }
+
+  onYesClick(): void {
+    // With a table selection the count input is disabled (it only advertises
+    // how many rows are selected), so return the persisted count untouched —
+    // never let the selection size silently overwrite the user's configured
+    // count. The exercise itself ignores the count when rows are selected, so
+    // the value is inert there either way.
+    const count = this.data.withSelection
+      ? Math.max(1, Math.floor(this.data.currentSettings?.countOfItems ?? 20))
+      : Math.max(1, Math.floor(this.countOfItems() ?? 1));
+    const closedata: SentenceQuizOption = {
+      countOfItems: count,
+    };
+
+    this.dialogRef.close(closedata);
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-quizoptions-dialog.html b/src/app/pages/translate-exercises/translate-exercises-quizoptions-dialog.html
new file mode 100644
index 0000000..bdcd60e
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-quizoptions-dialog.html
@@ -0,0 +1,14 @@
+<div *transloco="let t">
+  <h2 mat-dialog-title>{{ t('common.optionsOfQuiz') }}</h2>
+  <mat-dialog-content class="control-full-width">
+    <mat-form-field class="control-full-width">
+      <mat-label>{{ t('count') }}</mat-label>
+      <input matInput type="number" [(ngModel)]="countOfItems" [disabled]="data.withSelection">
+      <span matSuffix>{{data.sentenceQueueCount}}</span>
+    </mat-form-field>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
+    <button mat-button (click)="onYesClick()" [disabled]="isCountInvalid" cdkFocusInitial>{{ t('ok') }}</button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/pages/translate-exercises/translate-exercises-review-session.component.html b/src/app/pages/translate-exercises/translate-exercises-review-session.component.html
new file mode 100644
index 0000000..7264f95
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-review-session.component.html
@@ -0,0 +1,60 @@
+<ng-container *transloco="let t">
+  <mat-toolbar class="container">
+    <mat-toolbar-row>
+      <section>
+        <div class="example-button-container">
+          <mat-progress-bar mode="determinate" [value]="store.progress()"></mat-progress-bar>
+        </div>
+      </section>
+      <span class="toolbar-spacer"></span>
+      <mat-form-field class="seconds-field" appearance="outline" subscriptSizing="dynamic">
+        <mat-label>{{ t('translateExercises.secondsPerSentence') }}</mat-label>
+        <mat-select [ngModel]="store.autoModeSeconds()" (ngModelChange)="store.setAutoModeSeconds($event)"
+          [disabled]="store.isAutoMode()">
+          @for (sec of autoModeSecondChoices; track sec) {
+            <mat-option [value]="sec">{{ sec }}s</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.enableAutoMode')"
+        [attr.aria-label]="t('common.enableAutoMode')"
+        (click)="store.enableAutoMode()" [disabled]="store.isAutoMode()">
+        <mat-icon>play_circle_outline</mat-icon>
+      </button>
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.previous')"
+        [attr.aria-label]="t('common.previous')"
+        (click)="store.previous()" [disabled]="store.isAutoMode() || store.isPreviousDisabled()">
+        <mat-icon>arrow_left</mat-icon>
+      </button>
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.next')"
+        [attr.aria-label]="t('common.next')"
+        (click)="store.next()" [disabled]="store.isAutoMode() || store.isNextDisabled()">
+        <mat-icon>arrow_right</mat-icon>
+      </button>
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.quit')"
+        [attr.aria-label]="t('common.quit')" (click)="quit.emit()">
+        <mat-icon>cancel_presentation</mat-icon>
+      </button>
+    </mat-toolbar-row>
+  </mat-toolbar>
+  <div class="sentence-review-container">
+    <div class="sentence-review-text">
+      {{store.currentItem().ensent}}
+    </div>
+
+    <div class="sentence-review-text">
+      {{store.currentItem().cnsent}}
+    </div>
+
+    <div class="sentence-review-rating-container">
+      <mat-button-toggle-group [ngModel]="store.currentItem().rating" aria-label="Rating"
+        (change)="store.setRatingFromToggle($event)">
+        <mat-button-toggle [value]="1">1</mat-button-toggle>
+        <mat-button-toggle [value]="2">2</mat-button-toggle>
+        <mat-button-toggle [value]="3">3</mat-button-toggle>
+        <mat-button-toggle [value]="4">4</mat-button-toggle>
+        <mat-button-toggle [value]="5">5</mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
+  </div>
+</ng-container>
diff --git a/src/app/pages/translate-exercises/translate-exercises-review-session.component.scss b/src/app/pages/translate-exercises/translate-exercises-review-session.component.scss
new file mode 100644
index 0000000..de397ce
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-review-session.component.scss
@@ -0,0 +1,54 @@
+// See word-list: the host replaces blocks that were direct flex items.
+:host {
+    display: contents;
+}
+
+.toolbar-spacer {
+    flex: 1 1 auto;
+}
+
+.toolbar-fab-button {
+  margin-right: 4px;
+  margin-left: 4px;
+}
+
+// Seconds-per-sentence selector: compact so it fits the toolbar row on tablets.
+.seconds-field {
+  margin-right: 4px;
+  width: 110px;
+
+  .mat-mdc-text-field-wrapper {
+    padding-top: 4px;
+  }
+}
+
+.example-button-container {
+    display: flex;
+    justify-content: center;
+    width: 56px;
+}
+
+.sentence-review-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    padding: 24px;
+}
+
+.sentence-review-text {
+    font-size: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 50px;
+    margin-bottom: 16px;
+    width: 100%;
+}
+
+.sentence-review-rating-container {
+    display: flex;
+    justify-content: center;
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-review-session.component.spec.ts b/src/app/pages/translate-exercises/translate-exercises-review-session.component.spec.ts
new file mode 100644
index 0000000..83c6690
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-review-session.component.spec.ts
@@ -0,0 +1,83 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
+} from '@jsverse/transloco';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import { AIService, AudioService, LearningRatingService } from '../../services';
+
+import { TranslateExercisesReviewSessionComponent } from './translate-exercises-review-session.component';
+import { TranslateReviewSessionStore } from './translate-exercises-review-session.store';
+
+describe('TranslateExercisesReviewSessionComponent', () => {
+  let component: TranslateExercisesReviewSessionComponent;
+  let fixture: ComponentFixture<TranslateExercisesReviewSessionComponent>;
+  let store: TranslateReviewSessionStore;
+
+  beforeEach(async () => {
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesReviewSessionComponent, NoopAnimationsModule],
+      providers: [
+        TranslateReviewSessionStore,
+        { provide: AudioService, useValue: { playSound: vi.fn(), speakWord: vi.fn() } },
+        { provide: AIService, useValue: { getTTS: vi.fn().mockReturnValue(of({ audioFileUrl: 'a.mp3' })) } },
+        { provide: LearningRatingService, useValue: { getRatings: vi.fn().mockReturnValue(of([])), upsertRating: vi.fn() } },
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslateExercisesReviewSessionComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(TranslateReviewSessionStore);
+    store.start([{ ensent: 'Hello world', cnsent: '你好世界', rating: 0 }], true, 0);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the current sentence pair', () => {
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.textContent).toContain('Hello world');
+    expect(el.textContent).toContain('你好世界');
+  });
+
+  it('should advance on ArrowRight and quit on Escape (keyup)', () => {
+    store.start(
+      [{ ensent: 'a', cnsent: '甲', rating: 0 }, { ensent: 'b', cnsent: '乙', rating: 0 }],
+      true,
+      0
+    );
+    const quitSpy = vi.spyOn(component.quit, 'emit');
+
+    component.handleKeyboardEvent(new KeyboardEvent('keyup', { key: 'ArrowRight' }));
+    expect(store.cursor()).toBe(1);
+
+    component.handleKeyboardEvent(new KeyboardEvent('keyup', { key: '3' }));
+    expect(store.currentItem().rating).toBe(3);
+
+    component.handleKeyboardEvent(new KeyboardEvent('keyup', { key: 'Escape' }));
+    expect(quitSpy).toHaveBeenCalled();
+  });
+});
diff --git a/src/app/pages/translate-exercises/translate-exercises-review-session.component.ts b/src/app/pages/translate-exercises/translate-exercises-review-session.component.ts
new file mode 100644
index 0000000..8f1b329
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-review-session.component.ts
@@ -0,0 +1,162 @@
+import { ChangeDetectionStrategy, Component, HostListener, inject, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatSelectModule } from '@angular/material/select';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import { TranslateReviewSessionStore } from './translate-exercises-review-session.store';
+
+/**
+ * Review screen of the sentence (translation) exercises page: progress bar,
+ * auto-play, previous/next/quit controls and the current sentence pair (EN +
+ * CN) with its rating toggles. All review state lives in the injected session
+ * store; this component renders it and owns the keyboard listener, so
+ * keystroke handling is registered only while the review screen is alive (the
+ * container's @switch destroys it).
+ */
+@Component({
+  selector: 'app-translate-exercises-review-session',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatToolbarModule,
+    FormsModule,
+    MatProgressBarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatButtonToggleModule,
+    MatTooltipModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    TranslocoModule,
+  ],
+  templateUrl: './translate-exercises-review-session.component.html',
+  styleUrl: './translate-exercises-review-session.component.scss',
+})
+export class TranslateExercisesReviewSessionComponent {
+  /** Interval choices offered by the seconds-per-sentence selector. */
+  protected readonly autoModeSecondChoices = [3, 5, 10];
+
+  protected readonly store = inject(TranslateReviewSessionStore);
+
+  readonly quit = output<void>();
+
+  /**
+   * Review keyboard shortcuts: 1-5 rate the current sentence, ArrowUp/Down
+   * nudge the rating, ArrowLeft/Right move through the queue, Esc quits.
+   * Manual prev/next are ignored while auto mode is running.
+   */
+  @HostListener('document:keyup', ['$event'])
+  handleKeyboardEvent(event: KeyboardEvent) {
+    // Browser/app chords are never review input: Alt+ArrowLeft/Right belongs
+    // to browser history (the sentence must not also change), Ctrl/Alt+1…5
+    // must not rate the sentence.
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return;
+    }
+
+    // Keys typed into a form control belong to that control: arrows navigate
+    // the seconds-per-sentence select's options and Escape closes its panel -
+    // neither must re-rate the current sentence nor quit the session. The open
+    // dropdown panel lives in a cdk overlay, so match that too.
+    const target = event.target as HTMLElement | null;
+    if (
+      target?.closest(
+        'input, textarea, select, mat-select, [contenteditable="true"], .cdk-overlay-pane'
+      )
+    ) {
+      return;
+    }
+
+    // While the rating toggle group has focus, it already applies the arrow
+    // keys on keydown (Material clicks the neighboring toggle, which changes
+    // the rating and sends the upsert). Applying them again here on keyup
+    // would change the rating twice, send a duplicate upsert, and let the
+    // horizontal arrows navigate the queue at the same time. Number keys and
+    // Escape are not handled by the group, so they keep working.
+    if (
+      (event.key === 'ArrowUp' ||
+        event.key === 'ArrowDown' ||
+        event.key === 'ArrowLeft' ||
+        event.key === 'ArrowRight') &&
+      target?.closest('mat-button-toggle-group')
+    ) {
+      return;
+    }
+
+    switch (event.key) {
+      case 'Escape':
+        this.quit.emit();
+        break;
+      case 'ArrowLeft':
+        if (!this.store.isAutoMode()) {
+          this.store.previous();
+        }
+        break;
+      case 'ArrowRight':
+        if (!this.store.isAutoMode()) {
+          this.store.next();
+        }
+        break;
+      case 'ArrowUp':
+        this.store.rateCurrent(this.store.currentItem().rating + 1);
+        break;
+      case 'ArrowDown':
+        this.store.rateCurrent(this.store.currentItem().rating - 1);
+        break;
+      default: {
+        const ratingKey = parseInt(event.key, 10);
+        if (ratingKey >= 1 && ratingKey <= 5) {
+          this.store.rateCurrent(ratingKey);
+        } else {
+          // Unhandled key: leave the event alone, like the original handler.
+          return;
+        }
+      }
+    }
+    // NOTE: this only suppresses keyup-triggered defaults. Arrow-key page
+    // scrolling happens on keydown and is blocked by handleKeyDownEvent below
+    // — the call here is kept for parity / defensive coverage.
+    event.preventDefault();
+  }
+
+  /**
+   * Block the default *keydown* behavior of the arrow keys (page scroll) while
+   * the review screen owns them and no form control / toggle group / button is
+   * focused (those need their own keydown behavior). State changes stay on
+   * keyup — this listener only stops the browser from scrolling the page on
+   * ArrowUp/Down/Left/Right, which the keyup preventDefault cannot.
+   */
+  @HostListener('document:keydown', ['$event'])
+  handleKeyDownEvent(event: KeyboardEvent) {
+    if (event.ctrlKey || event.altKey || event.metaKey) {
+      return;
+    }
+
+    const key = event.key;
+    if (
+      key !== 'ArrowUp' &&
+      key !== 'ArrowDown' &&
+      key !== 'ArrowLeft' &&
+      key !== 'ArrowRight'
+    ) {
+      return;
+    }
+
+    const target = event.target as HTMLElement | null;
+    if (
+      target?.closest(
+        'input, textarea, select, mat-select, [contenteditable="true"], .cdk-overlay-pane, mat-button-toggle-group, button'
+      )
+    ) {
+      return;
+    }
+
+    event.preventDefault();
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-review-session.store.spec.ts b/src/app/pages/translate-exercises/translate-exercises-review-session.store.spec.ts
new file mode 100644
index 0000000..782a2d2
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-review-session.store.spec.ts
@@ -0,0 +1,612 @@
+import { TestBed } from '@angular/core/testing';
+import { of, Subject, throwError } from 'rxjs';
+
+import type { SentenceReviewQueueItem, UserLearningRating } from '../../interfaces';
+import { AIService, AudioService, LearningRatingService } from '../../services';
+
+import { TranslateReviewSessionStore } from './translate-exercises-review-session.store';
+
+describe('TranslateReviewSessionStore', () => {
+  let store: TranslateReviewSessionStore;
+  let mockAudioService: {
+    speakWord: ReturnType<typeof vi.fn>;
+    playSound: ReturnType<typeof vi.fn>;
+  };
+  let mockAIService: {
+    getTTS: ReturnType<typeof vi.fn>;
+  };
+  let mockRatingService: {
+    getRatings: ReturnType<typeof vi.fn>;
+    upsertRating: ReturnType<typeof vi.fn>;
+  };
+
+  const item = (ensent: string, cnsent = '测试句子', itemId?: number): SentenceReviewQueueItem => ({
+    ensent,
+    cnsent,
+    rating: 0,
+    itemId,
+  });
+
+  beforeEach(() => {
+    mockAudioService = {
+      speakWord: vi.fn(),
+      playSound: vi.fn(),
+    };
+    mockAIService = {
+      getTTS: vi.fn().mockReturnValue(of({ audioFileUrl: 'audio/tts.mp3' })),
+    };
+    mockRatingService = {
+      getRatings: vi.fn().mockReturnValue(of([])),
+      upsertRating: vi.fn().mockReturnValue(of({} as UserLearningRating)),
+    };
+
+    TestBed.configureTestingModule({
+      providers: [
+        TranslateReviewSessionStore,
+        { provide: AudioService, useValue: mockAudioService },
+        { provide: AIService, useValue: mockAIService },
+        { provide: LearningRatingService, useValue: mockRatingService },
+      ],
+    });
+    store = TestBed.inject(TranslateReviewSessionStore);
+  });
+
+  describe('start', () => {
+    it('returns false and stays reset for an empty queue', () => {
+      expect(store.start([], false, 1)).toBe(false);
+
+      expect(store.queue()).toEqual([]);
+      expect(store.cursor()).toBe(0);
+      expect(store.progress()).toBe(0);
+      expect(mockAIService.getTTS).not.toHaveBeenCalled();
+      expect(mockRatingService.getRatings).not.toHaveBeenCalled();
+    });
+
+    it('builds the queue, resets the cursor and speaks the first sentence via TTS', () => {
+      expect(store.start([item('Hello world'), item('Good morning')], false, 0)).toBe(true);
+
+      expect(store.queue().length).toBe(2);
+      expect(store.cursor()).toBe(0);
+      expect(store.progress()).toBe(50);
+      expect(mockAIService.getTTS).toHaveBeenCalledWith('Hello world');
+      expect(mockAudioService.playSound).toHaveBeenCalledWith('audio/tts.mp3', false);
+    });
+
+    it('does not speak when voice is disabled', () => {
+      store.start([item('Hello world')], true, 0);
+
+      expect(mockAIService.getTTS).not.toHaveBeenCalled();
+      expect(mockAudioService.playSound).not.toHaveBeenCalled();
+    });
+
+    it('pre-populates ratings from the API into the queue', () => {
+      const ratings: UserLearningRating[] = [
+        { contentId: 1, itemId: 10, rating: 4 },
+        { contentId: 1, itemId: 20, rating: 2 },
+      ];
+      mockRatingService.getRatings.mockReturnValue(of(ratings));
+
+      store.start(
+        [item('Hello world', '你好世界', 10), item('Good morning', '早上好', 20), item('Thank you', '谢谢', 30)],
+        false,
+        1
+      );
+
+      expect(mockRatingService.getRatings).toHaveBeenCalledWith(1);
+      expect(store.queue().find(q => q.itemId === 10)?.rating).toBe(4);
+      expect(store.queue().find(q => q.itemId === 20)?.rating).toBe(2);
+      // No rating exists for item 30: stays at 0.
+      expect(store.queue().find(q => q.itemId === 30)?.rating).toBe(0);
+    });
+
+    it('does not load ratings when contentId is 0', () => {
+      store.start([item('Hello world', '你好世界', 10)], false, 0);
+
+      expect(mockRatingService.getRatings).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('ratings preload vs in-session ratings', () => {
+    it('a late preload must not overwrite a rating the user already changed', () => {
+      const preload$ = new Subject<UserLearningRating[]>();
+      mockRatingService.getRatings.mockReturnValue(preload$.asObservable());
+      mockRatingService.upsertRating.mockReturnValue(of({ contentId: 1, itemId: 10, rating: 5 }));
+      store.start([item('Hello world', '你好世界', 10)], true, 1);
+
+      // The user rates the sentence before the (slow) preload response lands
+      // and the save is confirmed right away.
+      store.rateCurrent(5);
+
+      preload$.next([{ contentId: 1, itemId: 10, rating: 2 }]);
+
+      expect(store.currentItem().rating).toBe(5);
+      expect(store.quit().get(10)).toBe(5);
+    });
+
+    it('a late preload still populates items the user has not rated', () => {
+      const preload$ = new Subject<UserLearningRating[]>();
+      mockRatingService.getRatings.mockReturnValue(preload$.asObservable());
+      mockRatingService.upsertRating.mockReturnValue(of({ contentId: 1, itemId: 10, rating: 5 }));
+      store.start([item('Hello world', '你好世界', 10), item('Good morning', '早上好', 20)], true, 1);
+
+      store.rateCurrent(5); // rates item 10 (cursor starts at 0)
+
+      preload$.next([
+        { contentId: 1, itemId: 10, rating: 2 },
+        { contentId: 1, itemId: 20, rating: 4 },
+      ]);
+
+      expect(store.queue().find(q => q.itemId === 10)?.rating).toBe(5);
+      expect(store.queue().find(q => q.itemId === 20)?.rating).toBe(4);
+    });
+  });
+
+  describe('navigation', () => {
+    beforeEach(() => {
+      store.start([item('a'), item('b'), item('c')], true, 0);
+    });
+
+    it('moves to the previous sentence and updates progress', () => {
+      store.next();
+      expect(store.cursor()).toBe(1);
+      expect(store.progress()).toBe(67);
+
+      store.previous();
+      expect(store.cursor()).toBe(0);
+      expect(store.progress()).toBe(33);
+    });
+
+    it('does not move before the first sentence', () => {
+      store.previous();
+
+      expect(store.cursor()).toBe(0);
+    });
+
+    it('does not move past the last sentence', () => {
+      store.next();
+      store.next();
+      store.next();
+
+      expect(store.cursor()).toBe(2);
+      expect(store.isNextDisabled()).toBe(true);
+    });
+
+    it('exposes the disable computeds', () => {
+      expect(store.isPreviousDisabled()).toBe(true);
+      expect(store.isNextDisabled()).toBe(false);
+
+      store.next();
+
+      expect(store.isPreviousDisabled()).toBe(false);
+    });
+
+    it('speaks the sentence on navigation when voice is enabled', () => {
+      store.start([item('Hello world'), item('Good morning')], false, 0);
+      mockAIService.getTTS.mockClear();
+
+      store.next();
+
+      expect(mockAIService.getTTS).toHaveBeenCalledWith('Good morning');
+    });
+  });
+
+  describe('voice (TTS generation guard)', () => {
+    it('ignores a late TTS response for a sentence the cursor has already left', () => {
+      const first$ = new Subject<{ audioFileUrl: string }>();
+      mockAIService.getTTS.mockReturnValueOnce(first$.asObservable());
+
+      store.start([item('Hello world'), item('Good morning')], false, 0);
+      store.next(); // 'Hello world' is superseded by 'Good morning's own fetch
+
+      first$.next({ audioFileUrl: 'audio/stale.mp3' }); // too late
+
+      expect(mockAudioService.playSound).not.toHaveBeenCalledWith('audio/stale.mp3');
+    });
+
+    it('drops the playback once the session is quit/reset', () => {
+      const tts$ = new Subject<{ audioFileUrl: string }>();
+      mockAIService.getTTS.mockReturnValueOnce(tts$.asObservable());
+
+      store.start([item('Hello world')], false, 0);
+      store.quit();
+
+      tts$.next({ audioFileUrl: 'audio/stale.mp3' });
+
+      expect(mockAudioService.playSound).not.toHaveBeenCalled();
+    });
+
+    it('survives a TTS error', () => {
+      mockAIService.getTTS.mockReturnValueOnce(throwError(() => new Error('TTS failed')));
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      store.start([item('Hello world')], false, 0);
+
+      expect(store.queue().length).toBe(1);
+    });
+  });
+
+  describe('rateCurrent', () => {
+    beforeEach(() => {
+      store.start([item('Hello world', '你好世界', 10)], true, 1);
+    });
+
+    it('sets the current rating and saves it via upsertRating', () => {
+      const saved: UserLearningRating = { contentId: 1, itemId: 10, rating: 3 };
+      mockRatingService.upsertRating.mockReturnValue(of(saved));
+
+      store.rateCurrent(3);
+
+      expect(store.currentItem().rating).toBe(3);
+      expect(mockRatingService.upsertRating).toHaveBeenCalledWith(1, 10, 3);
+    });
+
+    it('does not increase the rating above 5 (ArrowUp at 5)', () => {
+      store.rateCurrent(5);
+      mockRatingService.upsertRating.mockClear();
+
+      store.rateCurrent(6);
+
+      expect(store.currentItem().rating).toBe(5);
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+    });
+
+    it('does not decrease the rating below 1 (ArrowDown at 1)', () => {
+      store.rateCurrent(1);
+      mockRatingService.upsertRating.mockClear();
+
+      store.rateCurrent(0);
+
+      expect(store.currentItem().rating).toBe(1);
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+    });
+
+    it('does not save when contentId is 0', () => {
+      store.start([item('Hello world', '你好世界', 10)], true, 0);
+
+      store.rateCurrent(3);
+
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+    });
+
+    it('does not save when itemId is undefined', () => {
+      store.start([item('Hello world', '你好世界', undefined)], true, 1);
+
+      store.rateCurrent(3);
+
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+    });
+
+    it('rolls the queue slot back to the confirmed rating when the save fails', () => {
+      mockRatingService.upsertRating.mockReturnValue(throwError(() => new Error('boom')));
+
+      store.rateCurrent(4);
+
+      expect(store.currentItem().rating).toBe(0);
+    });
+
+    it('rolls the queue slot back to the previous confirmed rating when the save fails', () => {
+      mockRatingService.upsertRating.mockReturnValueOnce(of({ contentId: 1, itemId: 10, rating: 2 }));
+      store.rateCurrent(2);
+
+      mockRatingService.upsertRating.mockReturnValueOnce(throwError(() => new Error('boom')));
+      store.rateCurrent(4);
+
+      expect(store.currentItem().rating).toBe(2);
+    });
+
+    it('drops stale save responses: a newer rating already in flight wins', () => {
+      // First rating is confirmed as 2.
+      mockRatingService.upsertRating.mockReturnValueOnce(of({ contentId: 1, itemId: 10, rating: 2 }));
+      store.rateCurrent(2);
+
+      // Then the user changes to 4, but the server response (simulated late)
+      // still reports 2: the queue already shows 4, so the stale response must
+      // be ignored and the confirmed rating stays 2 until the newer save lands.
+      mockRatingService.upsertRating.mockReturnValueOnce(of({ contentId: 1, itemId: 10, rating: 2 }));
+      store.rateCurrent(4);
+
+      const confirmed = store.quit();
+      expect(confirmed.get(10)).toBe(2);
+    });
+  });
+
+  describe('setRatingFromToggle', () => {
+    beforeEach(() => {
+      store.start([item('Hello world', '你好世界', 10)], true, 1);
+    });
+
+    it('applies a valid toggle selection', () => {
+      const event = { value: 4 } as any;
+
+      store.setRatingFromToggle(event);
+
+      expect(store.currentItem().rating).toBe(4);
+      expect(mockRatingService.upsertRating).toHaveBeenCalledWith(1, 10, 4);
+    });
+
+    it('restores the group value and does not save on deselect', () => {
+      store.rateCurrent(4);
+      mockRatingService.upsertRating.mockClear();
+      const group = { value: undefined as unknown };
+      const event = { value: undefined, source: { value: 4, buttonToggleGroup: group } } as any;
+
+      store.setRatingFromToggle(event);
+
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+      expect(group.value).toBe(4);
+      expect(store.currentItem().rating).toBe(4);
+    });
+  });
+
+  describe('auto mode', () => {
+    afterEach(() => {
+      store['stopAutoMode']?.();
+      vi.useRealTimers();
+    });
+
+    it('defaults to 5 seconds and inactive', () => {
+      expect(store.autoModeSeconds()).toBe(5);
+      expect(store.isAutoMode()).toBe(false);
+    });
+
+    it('does not enable when the queue is empty', () => {
+      store.enableAutoMode();
+
+      expect(store.isAutoMode()).toBe(false);
+    });
+
+    it('does not double-start when already running', () => {
+      vi.useFakeTimers();
+      store.start([item('a'), item('b')], true, 0);
+
+      store.enableAutoMode();
+      const firstTick = vi.getTimerCount();
+
+      store.enableAutoMode();
+
+      expect(store.isAutoMode()).toBe(true);
+      expect(vi.getTimerCount()).toBe(firstTick);
+    });
+
+    it('auto-advances to the next sentence every N seconds', () => {
+      vi.useFakeTimers();
+      store.start([item('a'), item('b'), item('c')], true, 0);
+
+      store.enableAutoMode();
+
+      expect(store.isAutoMode()).toBe(true);
+      expect(store.cursor()).toBe(0);
+
+      vi.advanceTimersByTime(5000);
+      expect(store.cursor()).toBe(1);
+
+      vi.advanceTimersByTime(5000);
+      expect(store.cursor()).toBe(2);
+    });
+
+    it('restarts from the first sentence regardless of the current cursor', () => {
+      vi.useFakeTimers();
+      store.start([item('a'), item('b'), item('c'), item('d')], true, 0);
+      store.next();
+      store.next(); // cursor at 2, mid-queue
+
+      store.enableAutoMode();
+
+      // Always jumps to the first sentence, even though the cursor was mid-queue.
+      expect(store.isAutoMode()).toBe(true);
+      expect(store.cursor()).toBe(0);
+      expect(store.progress()).toBe(25);
+
+      // Auto-advances from the first sentence through the queue.
+      vi.advanceTimersByTime(5000);
+      expect(store.cursor()).toBe(1);
+      vi.advanceTimersByTime(5000);
+      expect(store.cursor()).toBe(2);
+      vi.advanceTimersByTime(5000);
+      expect(store.cursor()).toBe(3);
+      expect(store.isAutoMode()).toBe(true);
+
+      // Reaches the last sentence and self-stops on the next tick.
+      vi.advanceTimersByTime(5000);
+      expect(store.isAutoMode()).toBe(false);
+      expect(store.cursor()).toBe(3);
+
+      // No further advances after auto mode stopped.
+      vi.advanceTimersByTime(5000);
+      expect(store.cursor()).toBe(3);
+    });
+
+    it('falls back to 5 seconds when autoModeSeconds is invalid', () => {
+      vi.useFakeTimers();
+      store.start([item('a'), item('b')], true, 0);
+      store.autoModeSeconds.set(0);
+
+      store.enableAutoMode();
+      expect(store.isAutoMode()).toBe(true);
+
+      // 0 would fire immediately if used literally; the fallback to 5s means
+      // no advance until 5s elapse.
+      vi.advanceTimersByTime(1000);
+      expect(store.cursor()).toBe(0);
+
+      vi.advanceTimersByTime(4000);
+      expect(store.cursor()).toBe(1);
+    });
+
+    it('setAutoModeSeconds updates the interval used by a later start', () => {
+      vi.useFakeTimers();
+      store.start([item('a'), item('b'), item('c')], true, 0);
+      store.setAutoModeSeconds(3);
+
+      store.enableAutoMode();
+      vi.advanceTimersByTime(3000);
+      expect(store.cursor()).toBe(1);
+    });
+
+    it('setAutoModeSeconds swaps a running timer without restarting the session', () => {
+      vi.useFakeTimers();
+      store.start([item('a'), item('b'), item('c'), item('d')], true, 0);
+      store.enableAutoMode();
+      vi.advanceTimersByTime(5000);
+      expect(store.cursor()).toBe(1);
+
+      store.setAutoModeSeconds(3);
+      // Old 5s timer is gone: only the new 3s cadence fires.
+      vi.advanceTimersByTime(2000);
+      expect(store.cursor()).toBe(1);
+      vi.advanceTimersByTime(1000);
+      expect(store.cursor()).toBe(2);
+      expect(store.isAutoMode()).toBe(true);
+    });
+
+    it('setAutoModeSeconds ignores invalid values', () => {
+      store.setAutoModeSeconds(0);
+      expect(store.autoModeSeconds()).toBe(5);
+      store.setAutoModeSeconds(2.5);
+      expect(store.autoModeSeconds()).toBe(5);
+      store.setAutoModeSeconds(-1);
+      expect(store.autoModeSeconds()).toBe(5);
+    });
+
+    it('speaks the first sentence when auto mode starts (voice enabled)', () => {
+      store.start([item('Hello world'), item('Good morning')], false, 0);
+      mockAIService.getTTS.mockClear();
+
+      store.enableAutoMode();
+
+      expect(mockAIService.getTTS).toHaveBeenCalledWith('Hello world');
+    });
+  });
+
+  describe('quit', () => {
+    it('returns the confirmed ratings and resets the session', () => {
+      store.start([item('Hello world', '你好世界', 10)], true, 1);
+      mockRatingService.upsertRating.mockReturnValue(of({ contentId: 1, itemId: 10, rating: 4 }));
+      store.rateCurrent(4);
+
+      const confirmed = store.quit();
+
+      expect(confirmed.get(10)).toBe(4);
+      expect(store.queue()).toEqual([]);
+      expect(store.cursor()).toBe(0);
+      expect(store.progress()).toBe(0);
+      expect(store.isAutoMode()).toBe(false);
+    });
+
+    it('includes preloaded ratings (unchanged sentences keep their stored rating)', () => {
+      mockRatingService.getRatings.mockReturnValue(
+        of([{ contentId: 1, itemId: 10, rating: 3 }])
+      );
+      store.start([item('Hello world', '你好世界', 10)], true, 1);
+
+      const confirmed = store.quit();
+
+      expect(confirmed.get(10)).toBe(3);
+    });
+
+    it('stops the auto timer so no tick can fire after the reset', () => {
+      vi.useFakeTimers();
+      store.start([item('a'), item('b')], true, 0);
+      store.enableAutoMode();
+      expect(store.isAutoMode()).toBe(true);
+
+      store.quit();
+
+      expect(store.isAutoMode()).toBe(false);
+      // Timer cleared: advancing time must not throw or change state.
+      vi.advanceTimersByTime(10000);
+      expect(store.cursor()).toBe(0);
+    });
+  });
+
+  describe('reset', () => {
+    it('clears every piece of session state', () => {
+      store.start([item('Hello world', '你好世界', 10)], false, 1);
+      store.rateCurrent(3);
+
+      store.reset();
+
+      expect(store.queue()).toEqual([]);
+      expect(store.cursor()).toBe(0);
+      expect(store.isAutoMode()).toBe(false);
+      expect(store.currentItem()).toEqual({
+        ensent: '',
+        cnsent: '',
+        rating: 0,
+      });
+    });
+
+    it('cancels an in-flight ratings load: a late response must not leak into the next session', () => {
+      const late$ = new Subject<UserLearningRating[]>();
+      mockRatingService.getRatings.mockReturnValueOnce(late$.asObservable());
+      store.start([item('Hello world', '你好世界', 10)], true, 1);
+
+      store.reset();
+      // New session over another file; item ids are per-file, so itemId 10
+      // collides - the stale response must not pre-populate it.
+      mockRatingService.getRatings.mockReturnValueOnce(of([]));
+      store.start([item('Good morning', '早上好', 10)], true, 2);
+
+      late$.next([{ contentId: 1, itemId: 10, rating: 4 }]);
+
+      expect(store.queue().find(q => q.itemId === 10)?.rating).toBe(0);
+    });
+
+    it('unsubscribes in-flight rating saves so late confirmations cannot write anywhere', () => {
+      const save$ = new Subject<UserLearningRating>();
+      mockRatingService.upsertRating.mockReturnValueOnce(save$.asObservable());
+      store.start([item('Hello world', '你好世界', 10)], true, 1);
+      store.rateCurrent(4);
+
+      store.reset();
+
+      expect(save$.observed).toBe(false);
+    });
+  });
+
+  describe('destruction', () => {
+    it('stops the auto timer when the store is destroyed (leaving the page mid-auto-mode)', () => {
+      vi.useFakeTimers();
+      store.start([item('a'), item('b')], true, 0);
+      store.enableAutoMode();
+      expect(store.isAutoMode()).toBe(true);
+
+      // Destroying the page's injector (navigating away) must tear down the
+      // auto-play timer - otherwise it keeps advancing and speaking sentences.
+      TestBed.resetTestingModule();
+
+      expect(store.isAutoMode()).toBe(false);
+      vi.advanceTimersByTime(10000);
+      expect(store.cursor()).toBe(0);
+    });
+
+    it('cancels in-flight rating saves on destroy', () => {
+      // Navigating away mid-save: the destroy callback must unsubscribe the
+      // pending upsert (mirroring reset/quit), or a late confirmation could
+      // write into a store whose session is gone.
+      const save$ = new Subject<UserLearningRating>();
+      mockRatingService.upsertRating.mockReturnValueOnce(save$.asObservable());
+      store.start([item('Hello world', '你好世界', 10)], true, 1);
+      store.rateCurrent(4);
+      expect(save$.observed).toBe(true);
+
+      TestBed.resetTestingModule();
+
+      expect(save$.observed).toBe(false);
+    });
+
+    it('cancels an in-flight ratings load on destroy so a late response cannot leak', () => {
+      const late$ = new Subject<UserLearningRating[]>();
+      mockRatingService.getRatings.mockReturnValueOnce(late$.asObservable());
+      store.start([item('Hello world', '你好世界', 10)], true, 1);
+      expect(late$.observed).toBe(true);
+
+      TestBed.resetTestingModule();
+
+      expect(late$.observed).toBe(false);
+      // A late preload after destroy must not pre-populate the (dead) session.
+      late$.next([{ contentId: 1, itemId: 10, rating: 5 }]);
+      expect(store.queue().find(q => q.itemId === 10)?.rating ?? 0).toBe(0);
+    });
+  });
+});
diff --git a/src/app/pages/translate-exercises/translate-exercises-review-session.store.ts b/src/app/pages/translate-exercises/translate-exercises-review-session.store.ts
new file mode 100644
index 0000000..c117b23
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-review-session.store.ts
@@ -0,0 +1,333 @@
+import { DestroyRef, Injectable, computed, inject, signal } from '@angular/core';
+import type { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { interval, type Subscription } from 'rxjs';
+
+import type { SentenceReviewQueueItem, UserLearningRating } from '../../interfaces';
+import { AIService, AudioService, LearningRatingService } from '../../services';
+
+/**
+ * State and behavior of one sentence review session: the sentence queue, the
+ * cursor, progress, per-sentence ratings (with their load/save lifecycle) and
+ * the auto-play timer. Provided on the page container so the review screen and
+ * the container share one instance; the container only prepares the queue and
+ * decides the screen (`mode`) - everything review-related lives here.
+ *
+ * Mirrors VocabularyReviewSessionStore; pronunciation differs: sentences have
+ * no recorded word audio, so voice always goes through the AI TTS endpoint.
+ */
+// eslint-disable-next-line @angular-eslint/use-injectable-provided-in -- intentionally NOT root-provided: the page container provides it so the review screen and the container share one instance scoped to the page
+@Injectable()
+export class TranslateReviewSessionStore {
+  private static readonly EMPTY_ITEM: SentenceReviewQueueItem = {
+    ensent: '',
+    cnsent: '',
+    rating: 0,
+  };
+
+  private readonly audiosrv = inject(AudioService);
+  private readonly aiutil = inject(AIService);
+  private readonly ratingService = inject(LearningRatingService);
+  private readonly destroyRef = inject(DestroyRef);
+
+  readonly queue = signal<SentenceReviewQueueItem[]>([]);
+  readonly cursor = signal(0);
+  // Auto mode: auto-advance to the next sentence every N seconds. While
+  // active, only the cancel/quit button is enabled; prev/next are disabled.
+  // Auto mode self-stops on reaching the last sentence.
+  readonly isAutoMode = signal(false);
+  // Seconds between auto-advance ticks; the review toolbar edits this.
+  readonly autoModeSeconds = signal(5);
+
+  /** Progress in percent, measured against the review queue (not the whole file). */
+  readonly progress = computed(() => {
+    const len = this.queue().length;
+    return len === 0 ? 0 : Math.round(((this.cursor() + 1) / len) * 100);
+  });
+
+  readonly isPreviousDisabled = computed(() => this.cursor() <= 0);
+  readonly isNextDisabled = computed(() => this.cursor() >= this.queue().length - 1);
+
+  /** The sentence under the cursor (a stable empty item when the queue is empty). */
+  readonly currentItem = computed(
+    () => this.queue()[this.cursor()] ?? TranslateReviewSessionStore.EMPTY_ITEM
+  );
+
+  private disableVoice = false;
+  // Backend ContentId of the studied file; 0 disables every rating call.
+  private contentId = 0;
+  // Confirmed (server-acknowledged) ratings of this session; synced back into
+  // the list view on quit.
+  private ratingMap = new Map<number, UserLearningRating>();
+  private autoModeSubscription?: Subscription;
+  // In-flight rating loads/saves; cancelled in reset() so a late response can
+  // never write into the next session (item ids are per-file, so the same id
+  // in another file would be corrupted).
+  private ratingSubscriptions: Subscription[] = [];
+  // Sentences the user rated during this session. A (possibly slow) preload
+  // response must not overwrite them: it would revert the visible rating and
+  // make the already-confirmed save look stale to saveRating's guard.
+  private userRatedItemIds = new Set<number>();
+  // Guards the async TTS playback: a slow response for an earlier sentence
+  // (or one fetched before reset/destroy) must not play over the current one.
+  private speakGeneration = 0;
+
+  constructor() {
+    // The store lives as long as the page container. If the user navigates
+    // away mid-auto-mode, the timer must die with it - otherwise the interval
+    // keeps advancing sentences and speaking them after the page is gone.
+    // In-flight rating loads/saves are cancelled too, mirroring reset()/quit().
+    this.destroyRef.onDestroy(() => {
+      this.stopAutoMode();
+      this.speakGeneration++;
+      for (const sub of this.ratingSubscriptions) {
+        sub.unsubscribe();
+      }
+      this.ratingSubscriptions = [];
+    });
+  }
+
+  /**
+   * Start a new session over `items`. Returns false (and stays reset) when
+   * there is nothing to review, so the caller can keep showing the list.
+   * Existing ratings for `contentId` are preloaded into the queue items.
+   */
+  start(items: SentenceReviewQueueItem[], disableVoice: boolean, contentId: number): boolean {
+    this.reset();
+    if (items.length === 0) {
+      return false;
+    }
+
+    this.disableVoice = disableVoice;
+    this.contentId = contentId;
+    this.queue.set(items);
+    this.cursor.set(0);
+    this.speakCurrent();
+
+    if (this.contentId > 0) {
+      this.ratingSubscriptions.push(
+        this.ratingService.getRatings(this.contentId).subscribe({
+          next: ratings => {
+            for (const r of ratings) {
+              // Items the user already rated in this session are left
+              // alone: their queue slot and confirmed save must win over the
+              // (possibly stale) server snapshot.
+              if (r.itemId !== undefined && !this.userRatedItemIds.has(r.itemId)) {
+                this.ratingMap.set(r.itemId, r);
+              }
+            }
+            // Pre-populate ratings in the queue. Items are replaced with copies
+            // (not mutated in place) so OnPush consumers see new references.
+            this.queue.update(q =>
+              q.map(sq =>
+                sq.itemId !== undefined &&
+                !this.userRatedItemIds.has(sq.itemId) &&
+                this.ratingMap.has(sq.itemId)
+                  ? { ...sq, rating: this.ratingMap.get(sq.itemId)!.rating }
+                  : sq
+              )
+            );
+          },
+          error: err => console.error('Failed to load ratings', err),
+        })
+      );
+    }
+    return true;
+  }
+
+  /** Drop every piece of session state (quit mid-session / back to the list). */
+  reset(): void {
+    this.stopAutoMode();
+    // A TTS request still in flight must not play now that the session (and
+    // its queue) is gone.
+    this.speakGeneration++;
+    // Cancel in-flight rating loads/saves: a response that lands after the
+    // session ended would write into the next session's state.
+    for (const sub of this.ratingSubscriptions) {
+      sub.unsubscribe();
+    }
+    this.ratingSubscriptions = [];
+    this.queue.set([]);
+    this.cursor.set(0);
+    this.ratingMap = new Map();
+    this.userRatedItemIds.clear();
+    this.contentId = 0;
+    this.disableVoice = false;
+  }
+
+  previous(): void {
+    if (this.cursor() > 0) {
+      this.cursor.update(c => c - 1);
+      this.speakCurrent();
+    }
+  }
+
+  next(): void {
+    if (this.cursor() < this.queue().length - 1) {
+      this.cursor.update(c => c + 1);
+      this.speakCurrent();
+    }
+  }
+
+  /**
+   * Always (re)start auto-play from the first sentence, regardless of the
+   * current cursor, so the behavior is consistent whether on the last sentence
+   * or mid-queue. No-op when already running or when there is nothing to study.
+   */
+  enableAutoMode(): void {
+    if (this.isAutoMode() || this.queue().length === 0) {
+      return;
+    }
+    this.cursor.set(0);
+    this.speakCurrent();
+    // Fall back to the default if the value was cleared or set to 0.
+    const seconds = this.autoModeSeconds() > 0 ? this.autoModeSeconds() : 5;
+    this.isAutoMode.set(true);
+    this.autoModeSubscription = interval(seconds * 1000).subscribe(() => this.autoAdvance());
+  }
+
+  /**
+   * Set the auto-advance interval (toolbar's seconds-per-sentence control).
+   * Invalid values are ignored. A running timer is swapped immediately, so the
+   * new interval applies without restarting the session.
+   */
+  setAutoModeSeconds(seconds: number): void {
+    if (!Number.isInteger(seconds) || seconds < 1) {
+      return;
+    }
+    this.autoModeSeconds.set(seconds);
+    if (this.isAutoMode()) {
+      this.autoModeSubscription?.unsubscribe();
+      this.autoModeSubscription = interval(seconds * 1000).subscribe(() => this.autoAdvance());
+    }
+  }
+
+  /**
+   * Set the current sentence's rating to `value` (1-5) and persist it.
+   * Out-of-range values are ignored, which is what clamps ArrowUp at 5 /
+   * ArrowDown at 1.
+   */
+  rateCurrent(value: number): void {
+    const idx = this.cursor();
+    const queue = this.queue();
+    if (idx < 0 || idx >= queue.length) {
+      return;
+    }
+    if (!Number.isInteger(value) || value < 1 || value > 5) {
+      return;
+    }
+    // Remember the user touched this item so a late preload cannot revert it.
+    const itemId = queue[idx].itemId;
+    if (itemId !== undefined) {
+      this.userRatedItemIds.add(itemId);
+    }
+    this.queue.update(q => q.map((sq, i) => (i === idx ? { ...sq, rating: value } : sq)));
+    this.saveRating(this.queue()[idx]);
+  }
+
+  /**
+   * Rating change coming from the toggle group. Clicking the active toggle
+   * deselects it (value becomes undefined); there is no "clear rating"
+   * operation, so the group is restored to the item's rating instead.
+   */
+  setRatingFromToggle(event: MatButtonToggleChange): void {
+    if (event.value === undefined || event.value === null || event.value < 1) {
+      event.source.buttonToggleGroup.value = this.currentItem().rating;
+      return;
+    }
+    this.rateCurrent(event.value);
+  }
+
+  /**
+   * Stop the auto-advance timer, reset the session, and return the confirmed
+   * ratings captured during it, keyed by itemId - the caller merges them into
+   * the list view's rating map. Only confirmed saves are returned; failed or
+   * still in-flight upserts must not leak into the list.
+   */
+  quit(): Map<number, number> {
+    this.stopAutoMode();
+    const confirmed = new Map<number, number>();
+    for (const [itemId, saved] of this.ratingMap) {
+      if (saved.rating >= 1) {
+        confirmed.set(itemId, saved.rating);
+      }
+    }
+    this.reset();
+    return confirmed;
+  }
+
+  private autoAdvance(): void {
+    if (this.cursor() < this.queue().length - 1) {
+      this.next();
+    } else {
+      // Reached the last sentence - stop auto mode so the manual controls
+      // return.
+      this.stopAutoMode();
+    }
+  }
+
+  private stopAutoMode(): void {
+    this.autoModeSubscription?.unsubscribe();
+    this.autoModeSubscription = undefined;
+    this.isAutoMode.set(false);
+  }
+
+  private speakCurrent(): void {
+    if (this.disableVoice) {
+      return;
+    }
+    const item = this.queue()[this.cursor()];
+    if (!item) {
+      return;
+    }
+    // Sentences have no recorded word audio, so pronunciation always goes
+    // through the AI TTS endpoint (same path as the list's play button). The
+    // generation guard keeps a slow response for an earlier sentence from
+    // speaking over the current one.
+    const generation = ++this.speakGeneration;
+    const sent = item.ensent;
+    this.aiutil
+      .getTTS(sent)
+      .subscribe({
+        next: (data: any) => {
+          if (generation !== this.speakGeneration) {
+            return;
+          }
+          void this.audiosrv.playSound(data.audioFileUrl as string, false);
+        },
+        error: err => console.error('TTS playback failed', err),
+      });
+  }
+
+  private saveRating(item: SentenceReviewQueueItem): void {
+    if (this.contentId <= 0 || item.itemId === undefined || item.rating < 1) {
+      return;
+    }
+
+    const requested = item.rating;
+    this.ratingSubscriptions.push(
+      this.ratingService.upsertRating(this.contentId, item.itemId, item.rating).subscribe({
+        next: saved => {
+          // Drop stale responses: if the queue slot already shows a different
+          // rating, a newer request is in flight and will set the final value.
+          const current = this.queue().find(sq => sq.itemId === item.itemId);
+          if (current && current.rating !== saved.rating) {
+            return;
+          }
+          this.ratingMap.set(item.itemId!, saved);
+        },
+        error: err => {
+          console.error('Failed to save rating', err);
+          // Roll the queue slot back to the last confirmed rating so the view
+          // does not keep showing a value the server never saved.
+          const idx = this.queue().findIndex(sq => sq.itemId === item.itemId);
+          if (idx >= 0 && this.queue()[idx].rating === requested) {
+            const confirmed = this.ratingMap.get(item.itemId!)?.rating ?? 0;
+            this.queue.update(q =>
+              q.map((sq, i) => (i === idx ? { ...sq, rating: confirmed } : sq))
+            );
+          }
+        },
+      })
+    );
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-reviewoptions-dialog.component.ts b/src/app/pages/translate-exercises/translate-exercises-reviewoptions-dialog.component.ts
new file mode 100644
index 0000000..1e1761e
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-reviewoptions-dialog.component.ts
@@ -0,0 +1,79 @@
+import { ChangeDetectionStrategy, Component, Inject, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import type { SentenceReviewOption } from '../../interfaces';
+
+@Component({
+  selector: 'app-translate-exercises-reviewoptions-dlg',
+  templateUrl: './translate-exercises-reviewoptions-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    FormsModule,
+    MatInputModule,
+    MatCheckboxModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    TranslocoModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TranslateExercisesReviewOptionsDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<TranslateExercisesReviewOptionsDialogComponent>);
+  // Seed every field from the settings currently applied in the container so
+  // reopening the dialog shows what the user picked last time.
+  readonly disableVoice = model(this.data.currentSettings?.disableVoice ?? false);
+  readonly countOfItems = model(
+    this.data.withSelection ? this.data.sentenceQueueCount : (this.data.currentSettings?.countOfItems ?? 20)
+  );
+
+  constructor(
+    @Inject(MAT_DIALOG_DATA)
+    public data: {
+      sentenceQueueCount: number;
+      withSelection: boolean;
+      currentSettings?: SentenceReviewOption;
+    }
+  ) {}
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  /** A cleared / 0 / negative / fractional count would empty or mis-truncate
+   * the queue (the exercise prep slices by it). Require an integer >= 1. */
+  get isCountInvalid(): boolean {
+    const count = this.countOfItems();
+    return !Number.isInteger(count) || count < 1;
+  }
+
+  onYesClick(): void {
+    // With a table selection the count input is disabled (it only advertises
+    // how many rows are selected), so return the persisted count untouched —
+    // never let the selection size silently overwrite the user's configured
+    // count. The exercise itself ignores the count when rows are selected, so
+    // the value is inert there either way.
+    const count = this.data.withSelection
+      ? Math.max(1, Math.floor(this.data.currentSettings?.countOfItems ?? 20))
+      : Math.max(1, Math.floor(this.countOfItems() ?? 1));
+    const closedata: SentenceReviewOption = {
+      disableVoice: this.disableVoice(),
+      countOfItems: count,
+    };
+
+    this.dialogRef.close(closedata);
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-reviewoptions-dialog.html b/src/app/pages/translate-exercises/translate-exercises-reviewoptions-dialog.html
new file mode 100644
index 0000000..8d38626
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-reviewoptions-dialog.html
@@ -0,0 +1,17 @@
+<div *transloco="let t">
+  <h2 mat-dialog-title>{{ t('common.optionsOfReview') }}</h2>
+  <mat-dialog-content class="control-full-width">
+    <mat-form-field class="control-full-width">
+      <mat-label>{{ t('count') }}</mat-label>
+      <input matInput type="number" [(ngModel)]="countOfItems" [disabled]="data.withSelection">
+      <span matSuffix>{{data.sentenceQueueCount}}</span>
+    </mat-form-field>
+    <div class="control-full-width">
+      <mat-checkbox [(ngModel)]="disableVoice"> {{ t('common.disableVoice') }}</mat-checkbox>
+    </div>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
+    <button mat-button (click)="onYesClick()" [disabled]="isCountInvalid" cdkFocusInitial>{{ t('ok') }}</button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/pages/translate-exercises/translate-exercises-select-dialog.component.ts b/src/app/pages/translate-exercises/translate-exercises-select-dialog.component.ts
new file mode 100644
index 0000000..cd4a5fa
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-select-dialog.component.ts
@@ -0,0 +1,99 @@
+import { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import type { VocabularySelectOption } from '../../interfaces';
+import { SelectionModeEnum } from '../../interfaces';
+
+/**
+ * Count/offset prompt behind the Selection menu's Random and Sequence items
+ * (Free Selection and By Count; there is no by-word selection for sentences).
+ * `OK` returns a `VocabularySelectOption`; Cancel / backdrop / Esc return
+ * `undefined` so the caller leaves the selection untouched.
+ */
+@Component({
+  selector: 'app-translate-exercises-select-dlg',
+  templateUrl: 'translate-exercises-select-dialog.html',
+  imports: [
+    MatFormFieldModule,
+    FormsModule,
+    MatInputModule,
+    MatButtonModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    TranslocoModule,
+  ],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class TranslateExercisesSelectDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<TranslateExercisesSelectDialogComponent>);
+  /** Exposes SelectionModeEnum to the template for @switch on data.mode. */
+  readonly SelectionMode = SelectionModeEnum;
+  readonly data = inject<SelectDialogData>(MAT_DIALOG_DATA);
+
+  readonly countOfItems = model(20);
+  readonly countOfOffset = model(0);
+
+  get titleKey(): string {
+    // Dialog titles match the Selection menu items that open them.
+    switch (this.data.mode) {
+      case SelectionModeEnum.FreeSelection:
+        return 'common.randomSelect';
+      case SelectionModeEnum.ByCount:
+        return 'common.sequenceSelect';
+      default:
+        return 'common.sequenceSelect';
+    }
+  }
+
+  onNoClick(): void {
+    this.dialogRef.close();
+  }
+
+  get isFormInvalid(): boolean {
+    if (this.data.mode === SelectionModeEnum.ByCount) {
+      // Require an integer count >= 1 and an integer offset in [0, rowCount)
+      // so an out-of-range offset can't silently wipe the selection.
+      const count = this.countOfItems();
+      const offset = this.countOfOffset() ?? 0;
+      const rowCount = this.data.rowCount;
+      const countInvalid = !Number.isInteger(count) || count < 1;
+      const offsetInvalid =
+        !Number.isInteger(offset) || offset < 0 || (rowCount !== undefined && offset >= rowCount);
+      return countInvalid || offsetInvalid;
+    }
+    return !Number.isInteger(this.countOfItems()) || this.countOfItems() < 1;
+  }
+
+  onYesClick(): void {
+    const result: VocabularySelectOption = { selectedSelectMode: this.data.mode };
+    if (this.data.mode === SelectionModeEnum.ByCount) {
+      // Clamp count/offset to safe integers as defense-in-depth.
+      const rowCount = this.data.rowCount;
+      const offset = Math.max(0, Math.floor(this.countOfOffset() ?? 0));
+      result.countOfItems = Math.max(1, Math.floor(this.countOfItems() ?? 1));
+      result.countOfOffset =
+        rowCount !== undefined ? Math.min(offset, Math.max(0, rowCount - 1)) : offset;
+    } else {
+      result.countOfItems = Math.max(1, Math.floor(this.countOfItems() ?? 1));
+    }
+    this.dialogRef.close(result);
+  }
+}
+
+/** Dialog data: `mode` is always required; `rowCount` bounds By Count's offset. */
+interface SelectDialogData {
+  mode: SelectionModeEnum;
+  rowCount?: number;
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-select-dialog.html b/src/app/pages/translate-exercises/translate-exercises-select-dialog.html
new file mode 100644
index 0000000..b43f162
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-select-dialog.html
@@ -0,0 +1,27 @@
+<div *transloco="let t">
+  <h2 mat-dialog-title>{{ t(titleKey) }}</h2>
+  <mat-dialog-content class="control-full-width">
+    @switch (data.mode) {
+      @case (SelectionMode.ByCount) {
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('countOfSelection') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="countOfItems" min="1" />
+        </mat-form-field>
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('countOfOffset') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="countOfOffset" min="0" />
+        </mat-form-field>
+      }
+      @case (SelectionMode.FreeSelection) {
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('countOfSelection') }}</mat-label>
+          <input matInput type="number" [(ngModel)]="countOfItems" min="1" />
+        </mat-form-field>
+      }
+    }
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
+    <button mat-button (click)="onYesClick()" [disabled]="isFormInvalid">{{ t('ok') }}</button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/pages/translate-exercises/translate-exercises-selectbyrating-dialog.html b/src/app/pages/translate-exercises/translate-exercises-selectbyrating-dialog.html
deleted file mode 100644
index 6f0a461..0000000
--- a/src/app/pages/translate-exercises/translate-exercises-selectbyrating-dialog.html
+++ /dev/null
@@ -1,25 +0,0 @@
-<div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('selectByRating') }}</h2>
-  <mat-dialog-content class="control-full-width">
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('selection.ratingOperator') }}</mat-label>
-      <mat-select [(ngModel)]="ratingOperator">
-        @for (op of ratingOperators; track op.value) {
-          <mat-option [value]="op.value">{{ t('selection.' + op.label) }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-    <mat-form-field class="control-full-width">
-      <mat-label>{{ t('selection.ratingValue') }}</mat-label>
-      <mat-select [(ngModel)]="ratingValue">
-        @for (val of ratingValues; track val) {
-          <mat-option [value]="val">{{ val }}</mat-option>
-        }
-      </mat-select>
-    </mat-form-field>
-  </mat-dialog-content>
-  <mat-dialog-actions>
-    <button mat-button (click)="onNoClick()">{{ t('no') }}</button>
-    <button mat-button (click)="onYesClick()">{{ t('ok') }}</button>
-  </mat-dialog-actions>
-</div>
diff --git a/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.html b/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.html
new file mode 100644
index 0000000..ec1446a
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.html
@@ -0,0 +1,194 @@
+<ng-container *transloco="let t">
+  <mat-toolbar class="container">
+    <mat-toolbar-row>
+      <span>
+        <h5>{{ t('sentences') }}</h5>
+      </span>
+      <span class="toolbar-spacer"></span>
+      <mat-form-field class="page-toolbar-item">
+        <mat-label>{{ t('files') }}</mat-label>
+        <mat-select matNativeControl [(value)]="selectedFile" (selectionChange)="fileSelectionChanged.emit($event)"
+          [disabled]="isLoadingContents()" [placeholder]="isLoadingContents() ? t('loading') : t('files')">
+          @if (isLoadingContents()) {
+            <mat-option disabled>
+              <mat-spinner diameter="18"></mat-spinner>
+              {{ t('loading') }}
+            </mat-option>
+          }
+          <mat-option value="">{{ t('none') }}</mat-option>
+          @for (file of allFiles(); track file.id ) {
+            <mat-option [value]="file">{{file.nameEnglish}}</mat-option>
+          }
+        </mat-select>
+      </mat-form-field>
+    </mat-toolbar-row>
+  </mat-toolbar>
+
+  <div class="container">
+    <div class="filter-row">
+      <div class="filter-bar">
+        <mat-form-field class="filter-bar-free-text" subscriptSizing="dynamic">
+          <mat-label>{{ t('filter') }}</mat-label>
+          <input matInput [(ngModel)]="freeText" (keyup)="onFreeTextChanged()" [disabled]="!selectedFile()" />
+        </mat-form-field>
+
+        <button mat-stroked-button [matMenuTriggerFor]="filterMenu" [disabled]="!selectedFile()">{{ t('filter') }} ▾</button>
+        <mat-menu #filterMenu="matMenu">
+          <button mat-menu-item (click)="defineFilter.emit()">{{ filterMenuLabel }}</button>
+          <button mat-menu-item (click)="clearFilter.emit()" [disabled]="!hasFilter">{{ t('common.filterClear') }}</button>
+        </mat-menu>
+      </div>
+
+      <div class="filter-bar-actions">
+        <button mat-stroked-button [matMenuTriggerFor]="quickMenu" [disabled]="!selectedFile()">{{ t('common.quickSelection') }} ▾</button>
+        <mat-menu #quickMenu="matMenu">
+          <button mat-menu-item (click)="quickSelect.emit('random')">
+            <mat-icon>shuffle</mat-icon>
+            <span>{{ t('common.randomSelect') }}</span>
+          </button>
+          <button mat-menu-item (click)="quickSelect.emit('sequence')">
+            <mat-icon>format_list_numbered</mat-icon>
+            <span>{{ t('common.sequenceSelect') }}</span>
+          </button>
+          <mat-divider></mat-divider>
+          <button mat-menu-item (click)="selectAllVisible.emit()" [disabled]="visibleRowCount === 0">
+            <mat-icon>select_all</mat-icon>
+            <span>{{ t('common.selectAllVisible') }}</span>
+          </button>
+          <button mat-menu-item (click)="clearSelection.emit()" [disabled]="selection().isEmpty()">
+            <mat-icon>deselect</mat-icon>
+            <span>{{ t('common.clearSelection') }}</span>
+          </button>
+        </mat-menu>
+
+        <button mat-stroked-button [matMenuTriggerFor]="exerciseMenu" [disabled]="!selectedFile()">{{ t('common.exercises') }} ▾</button>
+        <mat-menu #exerciseMenu="matMenu">
+          <button mat-menu-item (click)="translate.emit()">
+            <mat-icon>keyboard</mat-icon>
+            <span>{{ t('translateExercises.translation') }}</span>
+          </button>
+          <button mat-menu-item (click)="review.emit()">
+            <mat-icon>auto_stories</mat-icon>
+            <span>{{ t('review') }}</span>
+          </button>
+          <button mat-menu-item (click)="quiz.emit()">
+            <mat-icon>quiz</mat-icon>
+            <span>{{ t('quiz') }}</span>
+          </button>
+          <button mat-menu-item (click)="print.emit()">
+            <mat-icon>print</mat-icon>
+            <span>{{ t('print') }}</span>
+          </button>
+        </mat-menu>
+        <mat-divider [vertical]="true"></mat-divider>
+
+        <!-- Counts: total items in the file | rows after filtering | selected rows -->
+        <div class="filter-bar-counts">
+          <span [matTooltip]="t('items')">{{ sentenceQueueCount }}</span>
+          <mat-divider [vertical]="true"></mat-divider>
+          <span [matTooltip]="t('common.filteredItems')">{{ visibleRowCount }}</span>
+          <mat-divider [vertical]="true"></mat-divider>
+          <span [matTooltip]="t('totalSelections')">{{ selectionCount() }}</span>
+        </div>
+      </div>
+    </div>
+
+    <table mat-table [dataSource]="dataSource()" matSort class="mat-elevation-z8 w-full">
+      <!-- Checkbox Column -->
+      <ng-container matColumnDef="select">
+        <th mat-header-cell *matHeaderCellDef>
+          <mat-checkbox (change)="$event ? allRowsToggled.emit() : null"
+                        [checked]="selection().hasValue() && isAllSelected()"
+                        [indeterminate]="selection().hasValue() && !isAllSelected()">
+          </mat-checkbox>
+        </th>
+        <td mat-cell *matCellDef="let row">
+          <mat-checkbox (click)="$event.stopPropagation()"
+                        (change)="$event ? selection().toggle(row) : null"
+                        [checked]="selection().isSelected(row)">
+          </mat-checkbox>
+        </td>
+      </ng-container>
+
+      <!-- ID Column -->
+      <ng-container matColumnDef="id">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by ID"> {{ t('id') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.id}} </td>
+      </ng-container>
+
+      <!-- English Sentence Column -->
+      <ng-container matColumnDef="ensent">
+        <th mat-header-cell *matHeaderCellDef> {{ t('english') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.ensent}} </td>
+      </ng-container>
+
+      <!-- AI Column -->
+      <ng-container matColumnDef="ai">
+        <th mat-header-cell *matHeaderCellDef> {{ t('ai') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <div class="example-button-container">
+            <button mat-mini-fab aria-label="Play" (click)="playTts.emit(element.ensent)" [disabled]="!usercode.isUserCodeEntered">
+              <mat-icon>play_arrow</mat-icon>
+            </button>
+            <button mat-mini-fab aria-label="Explain" (click)="llmExplain.emit(element.ensent)" [disabled]="!usercode.isUserCodeEntered">
+              <mat-icon>psychology_alt</mat-icon>
+            </button>
+          </div>
+        </td>
+      </ng-container>
+
+      <!-- English Words Column -->
+      <ng-container matColumnDef="enwords">
+        <th mat-header-cell *matHeaderCellDef> {{ t('translateExercises.words') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.enwords?.join(', ') || ''}} </td>
+      </ng-container>
+
+      <!-- Chinese Sentence Column -->
+      <ng-container matColumnDef="cnsent">
+        <th mat-header-cell *matHeaderCellDef> {{ t('chinese') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.cnsent}} </td>
+      </ng-container>
+
+      <!-- Explanation Column -->
+      <ng-container matColumnDef="explaination">
+        <th mat-header-cell *matHeaderCellDef> {{ t('explain') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <button mat-mini-fab (click)="showExplanation.emit(element.explaination)" [disabled]="!element.explaination">
+            <mat-icon>info</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <!-- Extra Info Column -->
+      <ng-container matColumnDef="extraInfo">
+        <th mat-header-cell *matHeaderCellDef> {{ t('common.extraInfo') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <button mat-mini-fab (click)="showExtraInfo.emit(element.extraInfo)" [disabled]="!element.extraInfo">
+            <mat-icon>description</mat-icon>
+          </button>
+        </td>
+      </ng-container>
+
+      <!-- Rating Column -->
+      <ng-container matColumnDef="rating">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by rating"> {{ t('rating') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-button-toggle-group [ngModel]="getRating(element.id)" aria-label="Rating"
+            (change)="contentRatingChanged.emit({ item: element, event: $event })">
+            <mat-button-toggle [value]="1">1</mat-button-toggle>
+            <mat-button-toggle [value]="2">2</mat-button-toggle>
+            <mat-button-toggle [value]="3">3</mat-button-toggle>
+            <mat-button-toggle [value]="4">4</mat-button-toggle>
+            <mat-button-toggle [value]="5">5</mat-button-toggle>
+          </mat-button-toggle-group>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+    <mat-paginator [pageSizeOptions]="[20, 50, 100]" showFirstLastButtons
+      aria-label="Select page of periodic elements">
+    </mat-paginator>
+  </div>
+</ng-container>
diff --git a/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.scss b/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.scss
new file mode 100644
index 0000000..20ae40c
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.scss
@@ -0,0 +1,88 @@
+// The host element stands in for the toolbar/table blocks that used to be
+// direct children of the page's flex container; display: contents keeps the
+// original layout semantics (its children become the flex items).
+:host {
+    display: contents;
+}
+
+.toolbar-spacer {
+    flex: 1 1 auto;
+}
+
+.page-toolbar-item {
+    margin-top: 4px;
+    padding-top: 4px;
+}
+
+// Row above the table: the bordered filter box (free text + Sentence/Rating
+// filters) on the left, the action menus and counts on the right.
+.filter-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    margin-bottom: 8px;
+}
+
+// Fiori-style bordered box around the actual filters only. The free-text
+// filter grows to fill the box; on narrow screens the box takes a full row
+// and the free text wraps inside it.
+.filter-bar {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    flex: 1 1 auto;
+    box-sizing: border-box;
+    padding: 8px 12px;
+    border: 1px solid var(--mat-sys-outline-variant, #e0e0e0);
+    border-radius: 4px;
+}
+
+.filter-bar-free-text {
+    flex: 1 1 auto;
+    min-width: 200px;
+}
+
+// Action menus (Selection, Exercises) and counts, outside the bordered
+// box, pushed to the right edge of the row.
+.filter-bar-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 16px;
+    margin-left: auto;
+
+    mat-divider {
+        height: 24px;
+    }
+}
+
+// Read-only counts at the end of the row: total | filtered | selected.
+.filter-bar-counts {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--mat-sys-on-surface-variant, #666);
+    white-space: nowrap;
+
+    mat-divider {
+        height: 18px;
+    }
+}
+
+.example-button-container {
+    display: flex;
+    justify-content: center;
+    width: 60px;
+}
+
+@media (max-width: 820px) {
+    .filter-bar {
+        flex: 1 1 100%;
+    }
+
+    .filter-bar-free-text {
+        flex: 1 1 100%;
+    }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.spec.ts b/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.spec.ts
new file mode 100644
index 0000000..caa6d12
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.spec.ts
@@ -0,0 +1,200 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import type { ComponentFixture } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { MatTableDataSource } from '@angular/material/table';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
+} from '@jsverse/transloco';
+import { FilterJoinType, FilterOperation, type IFilterDefinition } from 'actslib';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import type { LearnEnglishSentFileItem, LearningContent } from '../../interfaces';
+import { UserCodeService } from '../../services';
+
+import { TranslateExercisesSentenceListComponent } from './translate-exercises-sentence-list.component';
+
+const emptyRoot: IFilterDefinition = { join: FilterJoinType.AND, conditions: [] };
+
+const mockFiles: LearningContent[] = [
+  { id: 1, categoryId: 2, nameEnglish: 'File1', nameChinese: '文件一', fileUrl: 'data/file1.json' },
+];
+
+const mockSentences: LearnEnglishSentFileItem[] = [
+  { id: '1', ensent: 'Hello world', cnsent: '你好世界', enwords: ['hello'] },
+  { id: '2', ensent: 'Good morning', cnsent: '早上好', enwords: ['good'] },
+];
+
+describe('TranslateExercisesSentenceListComponent', () => {
+  let component: TranslateExercisesSentenceListComponent;
+  let fixture: ComponentFixture<TranslateExercisesSentenceListComponent>;
+  let dataSource: MatTableDataSource<LearnEnglishSentFileItem>;
+  let selection: SelectionModel<LearnEnglishSentFileItem>;
+
+  beforeEach(async () => {
+    dataSource = new MatTableDataSource<LearnEnglishSentFileItem>();
+    dataSource.data = mockSentences.slice();
+    selection = new SelectionModel<LearnEnglishSentFileItem>(true, []);
+
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key.split('.').pop() ?? key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesSentenceListComponent, NoopAnimationsModule],
+      providers: [
+        { provide: UserCodeService, useValue: { isUserCodeEntered: true } },
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslateExercisesSentenceListComponent);
+    component = fixture.componentInstance;
+    fixture.componentRef.setInput('allFiles', mockFiles);
+    fixture.componentRef.setInput('selectedFile', mockFiles[0]);
+    fixture.componentRef.setInput('isLoadingContents', false);
+    fixture.componentRef.setInput('dataSource', dataSource);
+    fixture.componentRef.setInput('selection', selection);
+    fixture.componentRef.setInput('contentRatings', new Map<number, number>());
+    fixture.componentRef.setInput('filterDefinition', emptyRoot);
+    fixture.componentRef.setInput('appliedFreeText', '');
+  });
+
+  it('should create and render the table', () => {
+    fixture.detectChanges();
+    expect(component).toBeTruthy();
+  });
+
+  it('should expose the full column set', () => {
+    expect(component.displayedColumns).toEqual([
+      'select',
+      'id',
+      'ensent',
+      'ai',
+      'enwords',
+      'cnsent',
+      'explaination',
+      'extraInfo',
+      'rating',
+    ]);
+  });
+
+  it('should resolve sentence ratings through the rating item key', () => {
+    fixture.componentRef.setInput('contentRatings', new Map([[2, 4]]));
+
+    expect(component.getRating('2')).toBe(4);
+    expect(component.getRating(undefined)).toBe(0);
+  });
+
+  it('should count visible rows from the filter', () => {
+    expect(component.visibleRowCount).toBe(2);
+
+    dataSource.filter = 'hello';
+    expect(component.visibleRowCount).toBe(1);
+  });
+
+  it('isAllSelected should compare against visible rows only', () => {
+    selection.select(mockSentences[0]);
+    dataSource.filter = 'hello';
+    fixture.detectChanges();
+
+    expect(component.isAllSelected()).toBe(true);
+  });
+
+  it('isAllSelected should be false when a visible row is missing from the selection', () => {
+    selection.select(mockSentences[0]);
+
+    expect(component.isAllSelected()).toBe(false);
+  });
+
+  it('should seed the selection count on init and track changes', () => {
+    selection.select(mockSentences[0]);
+    fixture.detectChanges();
+    expect(component.selectionCount()).toBe(1);
+
+    selection.select(mockSentences[1]);
+    expect(component.selectionCount()).toBe(2);
+  });
+
+  it('should seed the free text box from the applied filter', () => {
+    fixture.componentRef.setInput('appliedFreeText', 'morning');
+
+    fixture.detectChanges();
+
+    expect(component.freeText).toBe('morning');
+  });
+
+  it('should emit free text changes live', () => {
+    fixture.detectChanges();
+    const emitted: string[] = [];
+    component.freeTextChanged.subscribe(v => emitted.push(v));
+
+    component.freeText = 'hello';
+    component.onFreeTextChanged();
+
+    expect(emitted).toEqual(['hello']);
+  });
+
+  it('should show a New label when no filter is active', () => {
+    expect(component.hasFilter).toBe(false);
+    expect(component.filterMenuLabel).toBe('filterNew');
+  });
+
+  it('should summarize active text conditions with word labels', () => {
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [{ property: 'ensent', operation: FilterOperation.Contains, lowValue: 'hello' }],
+    });
+
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toContain('english');
+    expect(component.filterMenuLabel).toContain('opContains');
+    expect(component.filterMenuLabel).toContain('hello');
+  });
+
+  it('should summarize rating conditions with comparison symbols', () => {
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [{ property: 'rating', operation: FilterOperation.GreaterOrEqual, lowValue: 3 }],
+    });
+
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toContain('>=');
+    expect(component.filterMenuLabel).toContain('3');
+  });
+
+  it('should render nested groups parenthesized with join words', () => {
+    fixture.componentRef.setInput('filterDefinition', {
+      join: FilterJoinType.AND,
+      conditions: [
+        {
+          join: FilterJoinType.OR,
+          conditions: [
+            { property: 'rating', operation: FilterOperation.GreaterOrEqual, lowValue: 4 },
+            { property: 'rating', operation: FilterOperation.Equal, lowValue: 0 },
+          ],
+        },
+      ],
+    });
+
+    const label = component.filterMenuLabel;
+    expect(label).toContain('joinOr');
+    expect(label).toContain('(');
+    expect(label).toContain('>=');
+  });
+});
diff --git a/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.ts b/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.ts
new file mode 100644
index 0000000..86c2ce1
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-sentence-list.component.ts
@@ -0,0 +1,231 @@
+import type { SelectionModel } from '@angular/cdk/collections';
+import type { OnInit } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  DestroyRef,
+  ViewChild,
+  inject,
+  input,
+  model,
+  output,
+  signal,
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import type { MatButtonToggleChange } from '@angular/material/button-toggle';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import type { MatSelectChange } from '@angular/material/select';
+import { MatSelectModule } from '@angular/material/select';
+import { MatSort, MatSortModule } from '@angular/material/sort';
+import type { MatTableDataSource } from '@angular/material/table';
+import { MatTableModule } from '@angular/material/table';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import type { IFilterDefinition } from 'actslib';
+
+import type { LearnEnglishSentFileItem, LearningContent } from '../../interfaces';
+import { SENTENCE_FILTER_PROPERTIES } from '../../interfaces';
+import { UserCodeService, ratingItemKey } from '../../services';
+import { hasActiveFilterDefinition, summarizeFilterDefinition } from '../../shared/filter-dialog';
+
+/** Menu-label cap before the ellipsis, matching the vocabulary list. */
+const FILTER_MENU_MAX_LENGTH = 40;
+
+/**
+ * List screen of the sentence (translation) exercises page: toolbar (file
+ * selector), the Fiori-style filter bar (live free text + Go-applied
+ * Sentence/Rating conditions) and the sentence table with paginator/sort.
+ * Purely presentational — the container owns the dataSource, selection model
+ * and all dialog orchestration; this component only renders them and forwards
+ * user interactions as outputs. The paginator/sort wiring onto the shared
+ * MatTableDataSource happens here because the corresponding elements live in
+ * this template.
+ */
+@Component({
+  selector: 'app-translate-exercises-sentence-list',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatToolbarModule,
+    FormsModule,
+    MatFormFieldModule,
+    MatSelectModule,
+    MatCheckboxModule,
+    MatTableModule,
+    MatPaginatorModule,
+    MatProgressSpinnerModule,
+    MatSortModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatButtonToggleModule,
+    MatTooltipModule,
+    MatMenuModule,
+    MatDividerModule,
+    TranslocoModule,
+  ],
+  templateUrl: './translate-exercises-sentence-list.component.html',
+  styleUrl: './translate-exercises-sentence-list.component.scss',
+})
+export class TranslateExercisesSentenceListComponent implements OnInit {
+  readonly allFiles = input.required<LearningContent[]>();
+  readonly selectedFile = model<LearningContent | undefined>(undefined);
+  readonly isLoadingContents = input.required<boolean>();
+  readonly dataSource = input.required<MatTableDataSource<LearnEnglishSentFileItem>>();
+  readonly selection = input.required<SelectionModel<LearnEnglishSentFileItem>>();
+  readonly contentRatings = input.required<Map<number, number>>();
+
+  // ── Filter bar ──────────────────────────────────────────────────
+  // The container owns the applied condition definition (it opens the shared
+  // filter dialog); this child only renders it for the menu label and
+  // forwards intents. freeText is a local field for the input box, emitted
+  // live.
+  readonly filterDefinition = input.required<IFilterDefinition>();
+  /**
+   * Free text currently applied by the container. The container's filter
+   * survives the @switch destroy/recreate of this screen (e.g. returning from
+   * a session), so it seeds the input box on init — otherwise the box shows
+   * empty while the table stays invisibly filtered.
+   */
+  readonly appliedFreeText = input('');
+  readonly freeTextChanged = output<string>();
+  readonly defineFilter = output<void>();
+  readonly clearFilter = output<void>();
+  readonly quickSelect = output<'random' | 'sequence'>();
+  readonly selectAllVisible = output<void>();
+  readonly clearSelection = output<void>();
+
+  readonly allRowsToggled = output<void>();
+  readonly fileSelectionChanged = output<MatSelectChange>();
+  readonly contentRatingChanged = output<{
+    item: LearnEnglishSentFileItem;
+    event: MatButtonToggleChange;
+  }>();
+  readonly playTts = output<string>();
+  readonly llmExplain = output<string>();
+  readonly showExplanation = output<string | undefined>();
+  readonly showExtraInfo = output<string[] | undefined>();
+  readonly translate = output<void>();
+  readonly review = output<void>();
+  readonly quiz = output<void>();
+  readonly print = output<void>();
+
+  /** Stable identities so mat-table's column defs only re-diff on a real flip. */
+  readonly displayedColumns = [
+    'select',
+    'id',
+    'ensent',
+    'ai',
+    'enwords',
+    'cnsent',
+    'explaination',
+    'extraInfo',
+    'rating',
+  ];
+
+  freeText = '';
+
+  private readonly transloco = inject(TranslocoService);
+  readonly usercode = inject(UserCodeService);
+
+  /** Free text applies live. */
+  onFreeTextChanged(): void {
+    this.freeTextChanged.emit(this.freeText);
+  }
+
+  get hasFilter(): boolean {
+    return hasActiveFilterDefinition(this.filterDefinition());
+  }
+
+  /** Condition-definition summary (join words and parentheses included) for the Filter menu item. */
+  get filterMenuLabel(): string {
+    if (!this.hasFilter) {
+      return this.transloco.translate('common.filterNew');
+    }
+    return summarizeFilterDefinition(
+      this.filterDefinition(),
+      SENTENCE_FILTER_PROPERTIES,
+      { translate: key => this.transloco.translate(key) },
+      FILTER_MENU_MAX_LENGTH
+    );
+  }
+
+  private readonly destroyRef = inject(DestroyRef);
+
+  /**
+   * Live mirror of the selection size. The selection model is a shared mutable
+   * object owned by the container: selection changes triggered from
+   * container-side dialog flows (Random, Sequence, Select All Visible, Clear)
+   * do not change any input reference, so the count is mirrored into a signal
+   * that the template reads instead of poking change detection by hand.
+   */
+  readonly selectionCount = signal(0);
+
+  @ViewChild(MatPaginator, { static: false }) set content(content: MatPaginator) {
+    if (content) {
+      // initially setter gets called with undefined
+      this.dataSource().paginator = content;
+    }
+  }
+  @ViewChild(MatSort, { static: false }) set contentSort(sort: MatSort) {
+    if (sort) {
+      this.dataSource().sort = sort;
+    }
+  }
+
+  ngOnInit(): void {
+    // Restore the filter box to what the container has applied (see
+    // appliedFreeText); a fresh instance starts empty otherwise.
+    this.freeText = this.appliedFreeText();
+
+    // Seed the count from the live selection: a screen re-created after a
+    // session (the container's @switch destroys/recreates this child) inherits
+    // the shared SelectionModel with rows already checked, but the
+    // selection.changed subscription only fires on the *next* change — so
+    // without this seed the toolbar shows 0 while checkboxes are visibly
+    // checked.
+    this.selectionCount.set(this.selection().selected.length);
+
+    this.selection()
+      .changed.pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(() => this.selectionCount.set(this.selection().selected.length));
+  }
+
+  get sentenceQueueCount(): number {
+    return this.dataSource().data.length;
+  }
+
+  /** Rows the table currently shows: the filtered count when a filter is active. */
+  get visibleRowCount(): number {
+    return this.dataSource().filter
+      ? this.dataSource().filteredData.length
+      : this.dataSource().data.length;
+  }
+
+  /**
+   * Whether every visible row is selected. Comparing against the visible rows
+   * (not just counts) keeps the header checkbox honest when the selection also
+   * contains rows the current filter hides — mirroring the container's
+   * isAllSelected/toggleAllRows semantics.
+   */
+  isAllSelected(): boolean {
+    const source = this.dataSource();
+    const visible = source.filter ? source.filteredData : source.data;
+    return visible.length > 0 && visible.every(row => this.selection().isSelected(row));
+  }
+
+  getRating(itemId: string | undefined): number {
+    const numId = ratingItemKey(itemId);
+    return numId === undefined ? 0 : (this.contentRatings().get(numId) ?? 0);
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-result.component.html b/src/app/pages/translate-exercises/translate-exercises-typing-result.component.html
new file mode 100644
index 0000000..d793d48
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-result.component.html
@@ -0,0 +1,47 @@
+<ng-container *transloco="let t">
+  <div class="result-content">
+    <div class="result-header">
+      <span>{{ t('translateExercises.timeCost') }}: {{ store.timeCostSeconds() }}</span>
+      <span class="result-score">{{ t('common.score') }}: {{ store.correctCount() }} / {{ store.results().length }}</span>
+      <span>{{ t('common.incorrect') }}: {{ store.incorrectCount() }}</span>
+      <button mat-raised-button color="primary" (click)="backToList.emit()">{{ t('backToList') }}</button>
+    </div>
+
+    <table mat-table [dataSource]="store.results()" class="mat-elevation-z8 w-full">
+      <!-- English Sent Column -->
+      <ng-container matColumnDef="ensent">
+        <th mat-header-cell *matHeaderCellDef> {{ t('english') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.ensent}} </td>
+      </ng-container>
+
+      <!-- English Words Column -->
+      <ng-container matColumnDef="enwords">
+        <th mat-header-cell *matHeaderCellDef> {{ t('translateExercises.words') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.enwords?.join(', ') || ''}} </td>
+      </ng-container>
+
+      <!-- Chinese Sent Column -->
+      <ng-container matColumnDef="cnsent">
+        <th mat-header-cell *matHeaderCellDef> {{ t('chinese') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.cnsent}} </td>
+      </ng-container>
+
+      <!-- Inputted Sent Column -->
+      <ng-container matColumnDef="inputted">
+        <th mat-header-cell *matHeaderCellDef> {{ t('inputted') }} </th>
+        <td mat-cell *matCellDef="let element"> {{element.inputted}} </td>
+      </ng-container>
+
+      <!-- Correct Column -->
+      <ng-container matColumnDef="correct">
+        <th mat-header-cell *matHeaderCellDef> {{ t('common.correct') }} </th>
+        <td mat-cell *matCellDef="let element">
+          <mat-checkbox [checked]="element.correct" [disabled]="true"></mat-checkbox>
+        </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </div>
+</ng-container>
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-result.component.scss b/src/app/pages/translate-exercises/translate-exercises-typing-result.component.scss
new file mode 100644
index 0000000..d827e4e
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-result.component.scss
@@ -0,0 +1,15 @@
+:host {
+    display: contents;
+}
+
+.result-header {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px 24px;
+    margin-bottom: 16px;
+}
+
+.result-score {
+    font-weight: 600;
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-result.component.spec.ts b/src/app/pages/translate-exercises/translate-exercises-typing-result.component.spec.ts
new file mode 100644
index 0000000..c85120c
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-result.component.spec.ts
@@ -0,0 +1,69 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
+} from '@jsverse/transloco';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import { TranslateDirectionEnum } from '../../interfaces';
+
+import { TranslateExercisesTypingResultComponent } from './translate-exercises-typing-result.component';
+import { TranslateTypingSessionStore } from './translate-exercises-typing-session.store';
+
+describe('TranslateExercisesTypingResultComponent', () => {
+  let component: TranslateExercisesTypingResultComponent;
+  let fixture: ComponentFixture<TranslateExercisesTypingResultComponent>;
+  let store: TranslateTypingSessionStore;
+
+  beforeEach(async () => {
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesTypingResultComponent, NoopAnimationsModule],
+      providers: [
+        TranslateTypingSessionStore,
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslateExercisesTypingResultComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(TranslateTypingSessionStore);
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the per-sentence results after completion', () => {
+    store.start(
+      [{ ensent: 'Hello world', cnsent: '你好世界', completed: false, inputted: '' }],
+      TranslateDirectionEnum.EnglishToChinese
+    );
+    store.setInput('你好世界');
+    store.submitAndNext();
+    fixture.detectChanges();
+
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.textContent).toContain('Hello world');
+    expect(el.textContent).toContain('你好世界');
+  });
+});
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-result.component.ts b/src/app/pages/translate-exercises/translate-exercises-typing-result.component.ts
new file mode 100644
index 0000000..ed313ff
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-result.component.ts
@@ -0,0 +1,32 @@
+import { ChangeDetectionStrategy, Component, inject, output } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatTableModule } from '@angular/material/table';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import { TranslateTypingSessionStore } from './translate-exercises-typing-session.store';
+
+/**
+ * Typing-result screen of the sentence page: the time cost, the score line and
+ * the per-sentence results (input vs. expected) with real correctness, all
+ * read from the shared session store.
+ */
+@Component({
+  selector: 'app-translate-exercises-typing-result',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    MatButtonModule,
+    MatCheckboxModule,
+    MatTableModule,
+    TranslocoModule,
+  ],
+  templateUrl: './translate-exercises-typing-result.component.html',
+  styleUrl: './translate-exercises-typing-result.component.scss',
+})
+export class TranslateExercisesTypingResultComponent {
+  protected readonly store = inject(TranslateTypingSessionStore);
+
+  readonly backToList = output<void>();
+
+  displayedColumns: string[] = ['ensent', 'enwords', 'cnsent', 'inputted', 'correct'];
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-session.component.html b/src/app/pages/translate-exercises/translate-exercises-typing-session.component.html
new file mode 100644
index 0000000..c24158a
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-session.component.html
@@ -0,0 +1,34 @@
+<ng-container *transloco="let t">
+  <mat-toolbar class="container">
+    <mat-toolbar-row>
+      <span class="toolbar-spacer"></span>
+      <section>
+        <div class="typing-progress">
+          <mat-progress-bar mode="determinate" [value]="store.progress()"></mat-progress-bar>
+        </div>
+      </section>
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.quit')"
+        [attr.aria-label]="t('common.quit')" (click)="quit.emit()">
+        <mat-icon>cancel_presentation</mat-icon>
+      </button>
+    </mat-toolbar-row>
+  </mat-toolbar>
+
+  <div class="container" id="translate-container">
+    @if (store.currentPrompt()) {
+      <mat-label class="w-full">{{ store.currentPrompt() }}</mat-label>
+
+      <div class="w-full">
+        <mat-form-field class="control-full-width">
+          <mat-label>{{ t('inputted') }}</mat-label>
+          <input matInput type="text" [ngModel]="store.inputted()" (ngModelChange)="store.setInput($event)"
+            (keyup.enter)="store.submitAndNext()" cdkFocusInitial />
+        </mat-form-field>
+      </div>
+
+      <div class="typing-actions">
+        <button mat-flat-button (click)="store.submitAndNext()">{{ t('submit') }}</button>
+      </div>
+    }
+  </div>
+</ng-container>
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-session.component.scss b/src/app/pages/translate-exercises/translate-exercises-typing-session.component.scss
new file mode 100644
index 0000000..ff18f66
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-session.component.scss
@@ -0,0 +1,28 @@
+:host {
+    display: contents;
+}
+
+.toolbar-spacer {
+    flex: 1 1 auto;
+}
+
+.toolbar-fab-button {
+    margin-right: 4px;
+    margin-left: 4px;
+}
+
+.typing-progress {
+    width: 240px;
+    display: flex;
+    align-items: center;
+}
+
+.control-full-width {
+    width: 100%;
+}
+
+.typing-actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 8px;
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-session.component.spec.ts b/src/app/pages/translate-exercises/translate-exercises-typing-session.component.spec.ts
new file mode 100644
index 0000000..4ad0aab
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-session.component.spec.ts
@@ -0,0 +1,64 @@
+import { TestBed, type ComponentFixture } from '@angular/core/testing';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+  TRANSLOCO_INTERCEPTOR,
+} from '@jsverse/transloco';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+import { TranslateDirectionEnum } from '../../interfaces';
+
+import { TranslateExercisesTypingSessionComponent } from './translate-exercises-typing-session.component';
+import { TranslateTypingSessionStore } from './translate-exercises-typing-session.store';
+
+describe('TranslateExercisesTypingSessionComponent', () => {
+  let component: TranslateExercisesTypingSessionComponent;
+  let fixture: ComponentFixture<TranslateExercisesTypingSessionComponent>;
+  let store: TranslateTypingSessionStore;
+
+  beforeEach(async () => {
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesTypingSessionComponent, NoopAnimationsModule],
+      providers: [
+        TranslateTypingSessionStore,
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslateExercisesTypingSessionComponent);
+    component = fixture.componentInstance;
+    store = TestBed.inject(TranslateTypingSessionStore);
+    store.start(
+      [{ ensent: 'Hello world', cnsent: '你好世界', completed: false, inputted: '' }],
+      TranslateDirectionEnum.EnglishToChinese
+    );
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should render the current prompt', () => {
+    const el = fixture.nativeElement as HTMLElement;
+    expect(el.textContent).toContain('Hello world');
+  });
+});
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-session.component.ts b/src/app/pages/translate-exercises/translate-exercises-typing-session.component.ts
new file mode 100644
index 0000000..624da5c
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-session.component.ts
@@ -0,0 +1,39 @@
+import { ChangeDetectionStrategy, Component, inject, output } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { TranslocoModule } from '@jsverse/transloco';
+
+import { TranslateTypingSessionStore } from './translate-exercises-typing-session.store';
+
+/**
+ * Typing (translation) session screen: the prompt of the current sentence, a
+ * free input for the translation, and submit controls. The input owns its
+ * keystrokes — no global key handler. All state lives in the shared session
+ * store; `quit` returns to the list.
+ */
+@Component({
+  selector: 'app-translate-exercises-typing-session',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    FormsModule,
+    MatToolbarModule,
+    MatProgressBarModule,
+    MatButtonModule,
+    MatIconModule,
+    MatInputModule,
+    MatTooltipModule,
+    TranslocoModule,
+  ],
+  templateUrl: './translate-exercises-typing-session.component.html',
+  styleUrl: './translate-exercises-typing-session.component.scss',
+})
+export class TranslateExercisesTypingSessionComponent {
+  protected readonly store = inject(TranslateTypingSessionStore);
+
+  readonly quit = output<void>();
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-session.store.spec.ts b/src/app/pages/translate-exercises/translate-exercises-typing-session.store.spec.ts
new file mode 100644
index 0000000..e70f96f
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-session.store.spec.ts
@@ -0,0 +1,134 @@
+import { TestBed } from '@angular/core/testing';
+
+import type { TranslateQueue } from '../../interfaces';
+import { TranslateDirectionEnum } from '../../interfaces';
+
+import { TranslateTypingSessionStore } from './translate-exercises-typing-session.store';
+
+const mockItems: TranslateQueue[] = [
+  { ensent: 'Hello world', cnsent: '你好世界', enwords: ['hello'], completed: false, inputted: '' },
+  { ensent: 'Good morning', cnsent: '早上好', enwords: ['good'], completed: false, inputted: '' },
+];
+
+describe('TranslateTypingSessionStore', () => {
+  let store: TranslateTypingSessionStore;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [TranslateTypingSessionStore],
+    });
+    store = TestBed.inject(TranslateTypingSessionStore);
+  });
+
+  it('should refuse to start an empty queue', () => {
+    expect(store.start([], TranslateDirectionEnum.EnglishToChinese)).toBe(false);
+    expect(store.queue().length).toBe(0);
+    expect(store.queueIndex()).toBe(-1);
+  });
+
+  it('should initialize the queue on start', () => {
+    expect(store.start(mockItems, TranslateDirectionEnum.EnglishToChinese)).toBe(true);
+
+    expect(store.queue().length).toBe(2);
+    expect(store.queueIndex()).toBe(0);
+    expect(store.inputted()).toBe('');
+    expect(store.queue().every(item => !item.completed)).toBe(true);
+  });
+
+  it('should show the EN sentence as prompt in EnglishToChinese direction', () => {
+    store.start(mockItems, TranslateDirectionEnum.EnglishToChinese);
+
+    expect(store.currentPrompt()).toBe('Hello world');
+  });
+
+  it('should show the CN sentence as prompt in ChineseToEnglish direction', () => {
+    store.start(mockItems, TranslateDirectionEnum.ChineseToEnglish);
+
+    expect(store.currentPrompt()).toBe('你好世界');
+  });
+
+  it('should record a correct result for an exact answer', () => {
+    store.start([mockItems[0]], TranslateDirectionEnum.EnglishToChinese);
+    store.setInput('你好世界');
+
+    store.submitAndNext();
+
+    expect(store.results().length).toBe(1);
+    expect(store.results()[0].correct).toBe(true);
+  });
+
+  it('should normalize case, punctuation and whitespace when grading', () => {
+    store.start([mockItems[0]], TranslateDirectionEnum.ChineseToEnglish);
+    store.setInput('  HELLO World! ');
+
+    store.submitAndNext();
+
+    expect(store.results()[0].correct).toBe(true);
+  });
+
+  it('should record an incorrect result for a wrong answer', () => {
+    store.start([mockItems[0]], TranslateDirectionEnum.EnglishToChinese);
+    store.setInput('随便什么');
+
+    store.submitAndNext();
+
+    expect(store.results()[0].correct).toBe(false);
+    expect(store.incorrectCount()).toBe(1);
+  });
+
+  it('should keep the original input in the result', () => {
+    store.start([mockItems[0]], TranslateDirectionEnum.EnglishToChinese);
+    store.setInput('  你好世界! ');
+
+    store.submitAndNext();
+
+    expect(store.results()[0].inputted).toBe('  你好世界! ');
+  });
+
+  it('should advance the cursor and clear the input on submit', () => {
+    store.start(mockItems, TranslateDirectionEnum.EnglishToChinese);
+    store.setInput('你好世界');
+
+    store.submitAndNext();
+
+    expect(store.queueIndex()).toBe(1);
+    expect(store.inputted()).toBe('');
+    expect(store.queue()[0].completed).toBe(true);
+    expect(store.currentPrompt()).toBe('Good morning');
+  });
+
+  it('should complete the session after the last sentence', () => {
+    store.start([mockItems[0]], TranslateDirectionEnum.EnglishToChinese);
+    store.setInput('你好世界');
+
+    store.submitAndNext();
+
+    expect(store.isComplete()).toBe(true);
+    expect(store.timeCostSeconds()).toBeGreaterThanOrEqual(0);
+    expect(store.progress()).toBe(100);
+  });
+
+  it('should ignore submits after completion', () => {
+    store.start([mockItems[0]], TranslateDirectionEnum.EnglishToChinese);
+    store.setInput('你好世界');
+    store.submitAndNext();
+
+    store.submitAndNext();
+
+    expect(store.results().length).toBe(1);
+  });
+
+  it('should reset all state', () => {
+    store.start(mockItems, TranslateDirectionEnum.EnglishToChinese);
+    store.setInput('hello');
+
+    store.reset();
+
+    expect(store.queue().length).toBe(0);
+    expect(store.queueIndex()).toBe(-1);
+    expect(store.inputted()).toBe('');
+    expect(store.results().length).toBe(0);
+    expect(store.isComplete()).toBe(false);
+    expect(store.timeCostSeconds()).toBe(0);
+  });
+});
diff --git a/src/app/pages/translate-exercises/translate-exercises-typing-session.store.ts b/src/app/pages/translate-exercises/translate-exercises-typing-session.store.ts
new file mode 100644
index 0000000..be03d41
--- /dev/null
+++ b/src/app/pages/translate-exercises/translate-exercises-typing-session.store.ts
@@ -0,0 +1,124 @@
+import { Injectable, computed, signal } from '@angular/core';
+
+import type { SentenceTypingResult, TranslateQueue } from '../../interfaces';
+import { TranslateDirectionEnum, normalizeSentenceAnswer } from '../../interfaces';
+
+/**
+ * State and behavior of one typing (translation) session: the sentence queue,
+ * the cursor, the live input of the current sentence, per-sentence results
+ * graded via normalizeSentenceAnswer, and the time cost. Provided on the page
+ * container so the typing and result screens share one instance; the container
+ * only decides the screen (`mode`) — everything typing-related lives here.
+ *
+ * Replaces the old TranslateExercisesComponent onStart/onSubmitToNext/
+ * setQueueIndex trio: grading was added (the old result screen never compared
+ * answers) and an empty queue is a no-op instead of falling through to the
+ * result screen.
+ */
+// eslint-disable-next-line @angular-eslint/use-injectable-provided-in -- intentionally NOT root-provided: the page container provides it so the typing/result screens share one instance scoped to the page
+@Injectable()
+export class TranslateTypingSessionStore {
+  readonly queue = signal<TranslateQueue[]>([]);
+  readonly queueIndex = signal(-1);
+  readonly inputted = signal('');
+  readonly results = signal<SentenceTypingResult[]>([]);
+  /** Set when the last sentence is submitted; the container switches to the result screen. */
+  readonly isComplete = signal(false);
+  readonly timeCostSeconds = signal(0);
+
+  private direction: TranslateDirectionEnum = TranslateDirectionEnum.EnglishToChinese;
+  private startTime = new Date();
+
+  /** Prompt text of the current sentence: EN (en2cn input) or CN. */
+  readonly currentPrompt = computed(() => {
+    const idx = this.queueIndex();
+    const queue = this.queue();
+    if (idx < 0 || idx >= queue.length) {
+      return '';
+    }
+    return this.direction === TranslateDirectionEnum.EnglishToChinese
+      ? queue[idx].ensent
+      : queue[idx].cnsent;
+  });
+
+  /** Progress in percent, measured against the typing queue (not the whole file). */
+  readonly progress = computed(() => {
+    const queue = this.queue();
+    if (queue.length === 0) {
+      return 100;
+    }
+    const completed = queue.filter(q => q.completed).length;
+    return Math.round((completed * 100) / queue.length);
+  });
+
+  readonly correctCount = computed(() => this.results().filter(r => r.correct).length);
+  readonly incorrectCount = computed(() => this.results().filter(r => !r.correct).length);
+
+  /**
+   * Start a new session over `items`. Returns false (and stays reset) when
+   * there is nothing to type, so the caller can keep showing the list.
+   */
+  start(items: TranslateQueue[], direction: TranslateDirectionEnum): boolean {
+    this.reset();
+    if (items.length === 0) {
+      return false;
+    }
+
+    this.direction = direction;
+    this.queue.set(items.map(item => ({ ...item, completed: false })));
+    this.results.set([]);
+    this.queueIndex.set(0);
+    this.inputted.set('');
+    this.startTime = new Date();
+    return true;
+  }
+
+  /** Drop every piece of session state (quit mid-session / leave the result screen). */
+  reset(): void {
+    this.queue.set([]);
+    this.queueIndex.set(-1);
+    this.inputted.set('');
+    this.results.set([]);
+    this.isComplete.set(false);
+    this.timeCostSeconds.set(0);
+    this.direction = TranslateDirectionEnum.EnglishToChinese;
+  }
+
+  setInput(value: string): void {
+    this.inputted.set(value);
+  }
+
+  /**
+   * Grade the current input against the expected translation (both normalized
+   * via normalizeSentenceAnswer), record the result and advance. Completing
+   * the last sentence stops the clock and flags the session complete.
+   */
+  submitAndNext(): void {
+    const idx = this.queueIndex();
+    const queue = this.queue();
+    if (idx < 0 || idx >= queue.length || this.isComplete()) {
+      return;
+    }
+
+    const item = queue[idx];
+    const input = this.inputted();
+    const target =
+      this.direction === TranslateDirectionEnum.EnglishToChinese ? item.cnsent : item.ensent;
+    const correct = normalizeSentenceAnswer(input) === normalizeSentenceAnswer(target);
+
+    this.results.update(rs => [
+      ...rs,
+      { ensent: item.ensent, cnsent: item.cnsent, inputted: input, correct },
+    ]);
+    this.queue.update(q => q.map((v, i) => (i === idx ? { ...v, completed: true } : v)));
+    this.inputted.set('');
+
+    const next = idx + 1;
+    if (next < queue.length) {
+      this.queueIndex.set(next);
+    } else {
+      this.timeCostSeconds.set(Math.round((new Date().getTime() - this.startTime.getTime()) / 1000));
+      this.isComplete.set(true);
+    }
+  }
+}
diff --git a/src/app/pages/translate-exercises/translate-exercises.component.html b/src/app/pages/translate-exercises/translate-exercises.component.html
index 1c09c5f..9dcf6b4 100644
--- a/src/app/pages/translate-exercises/translate-exercises.component.html
+++ b/src/app/pages/translate-exercises/translate-exercises.component.html
@@ -1,261 +1,60 @@
-<main focusOnNavigation aria-label="Translate Exercise page" class="translate-page" *transloco="let t">
+<main focusOnNavigation aria-label="Translate Exercise page" class="translate-page">
   <div class="translate-page-content">
-    @if (isTranslateNotStarted) {
-      <mat-toolbar class="container">
-        <mat-toolbar-row>
-          <span>
-            <h5>{{ t('translateExercises.title') }}</h5>
-          </span>
-          <span class="toolbar-spacer"></span>
-          <mat-form-field class="page-toolbar-item">
-            <mat-label>{{ t('files') }}</mat-label>
-            <mat-select matNativeControl [(value)]="selectedFile" (selectionChange)="onFileSelectionChanged($event)"
-              [disabled]="isLoadingContents" [placeholder]="isLoadingContents ? t('loading') : t('files')">
-              @if (isLoadingContents) {
-                <mat-option disabled>
-                  <mat-spinner diameter="18"></mat-spinner>
-                  {{ t('loading') }}
-                </mat-option>
-              }
-              <mat-option value="">{{ t('none') }}</mat-option>
-              @for (file of allFiles; track file.id) {
-                <mat-option [value]="file">{{file.nameEnglish}}</mat-option>
-              }
-            </mat-select>
-          </mat-form-field>
-          <span class="toolbar-item-count" matSuffix><small>{{ t('items') }}: {{reciteQueuesCount}}</small></span>
-          <section style="padding-left: 8px;">
-            <div class="example-button-container">
-              <button mat-fab [matMenuTriggerFor]="selectMenu" [matTooltip]="t('select')" [disabled]="!selectedFile">
-                <mat-icon>query_builder</mat-icon>
-              </button>
-            </div>
-          </section>
-          <mat-menu #selectMenu="matMenu">
-            <button mat-menu-item (click)="onSelectByRating()">{{ t('selectByRating') }}</button>
-          </mat-menu>
-          <section>
-            <div class="example-button-container">
-              <button mat-fab (click)="onPrintWithOptions()" [disabled]="!selectedFile">
-                <mat-icon>print</mat-icon>
-              </button>
-            </div>
-          </section>
-          <section>
-            <div class="example-button-container">
-              <button mat-fab (click)="onStartWithOptions()" [disabled]="!selectedFile">
-                <mat-icon>keyboard</mat-icon>
-              </button>
-            </div>
-          </section>
-        </mat-toolbar-row>
-      </mat-toolbar>
-
-      <div class="container">
-        <mat-form-field class="w-full">
-          <mat-label>{{ t('filter') }}</mat-label>
-          <input matInput (keyup)="applyFilter($event)" #input>
-        </mat-form-field>
-
-        <table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8 w-full">
-          <!-- Checkbox Column -->
-          <ng-container matColumnDef="select">
-            <th mat-header-cell *matHeaderCellDef>
-              <mat-checkbox (change)="$event ? toggleAllRows() : null"
-                            [checked]="selection.hasValue() && isAllSelected()"
-                            [indeterminate]="selection.hasValue() && !isAllSelected()">
-              </mat-checkbox>
-            </th>
-            <td mat-cell *matCellDef="let row">
-              <mat-checkbox (click)="$event.stopPropagation()"
-                            (change)="$event ? selection.toggle(row) : null"
-                            [checked]="selection.isSelected(row)">
-              </mat-checkbox>
-            </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <!-- ID Column -->
-          <ng-container matColumnDef="id">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by ID"> {{ t('id') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.id}} </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <!-- English Sentence Column -->
-          <ng-container matColumnDef="ensent">
-            <th mat-header-cell *matHeaderCellDef> {{ t('translateExercises.english') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.ensent}} </td>
-            <td mat-footer-cell *matFooterCellDef> {{ t('totalRecords') }}: {{reciteQueuesCount}} </td>
-          </ng-container>
-
-          <!-- AI Column -->
-          <ng-container matColumnDef="ai">
-            <th mat-header-cell *matHeaderCellDef> {{ t('ai') }} </th>
-            <td mat-cell *matCellDef="let element">
-              <div class="example-button-container">
-                <button mat-mini-fab aria-label="Play" (click)="onPlayTTS(element.ensent)" [disabled]="!usercode.isUserCodeEntered">
-                  <mat-icon>play_arrow</mat-icon>
-                </button>
-                <button mat-mini-fab aria-label="Play" (click)="onLLMExplain(element.ensent)" [disabled]="!usercode.isUserCodeEntered">
-                  <mat-icon>psychology_alt</mat-icon>
-                </button>
-              </div>
-            </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-<!-- English Words Column -->
-          <ng-container matColumnDef="enwords">
-            <th mat-header-cell *matHeaderCellDef> {{ t('translateExercises.words') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.enwords?.join(', ') || ''}} </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-<!-- Chinese Sentence Column -->
-          <ng-container matColumnDef="cnsent">
-            <th mat-header-cell *matHeaderCellDef> {{ t('translateExercises.chinese') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.cnsent}} </td>
-            <td mat-footer-cell *matFooterCellDef> {{ t('totalSelections') }}: {{selection.selected.length}} </td>
-          </ng-container>
-
-          <!-- Explanation Column -->
-          <ng-container matColumnDef="explaination">
-            <th mat-header-cell *matHeaderCellDef> {{ t('explain') }} </th>
-            <td mat-cell *matCellDef="let element">
-              <button mat-mini-fab (click)="onShowExplanation(element.explaination)" [disabled]="!element.explaination">
-                <mat-icon>info</mat-icon>
-              </button>
-            </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <!-- Extra Info Column -->
-          <ng-container matColumnDef="extraInfo">
-            <th mat-header-cell *matHeaderCellDef> {{ t('translateExercises.extraInfo') }} </th>
-            <td mat-cell *matCellDef="let element">
-              <button mat-mini-fab (click)="onShowExtraInfo(element.extraInfo)" [disabled]="!element.extraInfo">
-                <mat-icon>description</mat-icon>
-              </button>
-            </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <!-- Rating Column -->
-          <ng-container matColumnDef="rating">
-            <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by rating"> {{ t('rating') }} </th>
-            <td mat-cell *matCellDef="let element">
-              <mat-button-toggle-group [ngModel]="getRating(element.id)" aria-label="Rating"
-                (change)="onContentRatingChanged(element, $event)">
-                <mat-button-toggle [value]="1">1</mat-button-toggle>
-                <mat-button-toggle [value]="2">2</mat-button-toggle>
-                <mat-button-toggle [value]="3">3</mat-button-toggle>
-                <mat-button-toggle [value]="4">4</mat-button-toggle>
-                <mat-button-toggle [value]="5">5</mat-button-toggle>
-              </mat-button-toggle-group>
-            </td>
-            <td mat-footer-cell *matFooterCellDef></td>
-          </ng-container>
-
-          <tr mat-header-row *matHeaderRowDef="displayedPreviewColumns; sticky: true"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedPreviewColumns;"></tr>
-          <tr mat-footer-row *matFooterRowDef="displayedPreviewColumns; sticky: true"></tr>
-        </table>
-        <mat-paginator [pageSizeOptions]="[20, 50, 100]"
-          showFirstLastButtons
-          aria-label="Select page of periodic elements">
-        </mat-paginator>
-      </div>
-    }
-
-    @if (isTranslateInProgress) {
-      <mat-toolbar class="container">
-        <mat-toolbar-row>
-          <span class="toolbar-spacer"></span>
-          <section>
-            <div class="example-button-container">
-              <mat-progress-bar mode="determinate" [value]="currentProgress">
-              </mat-progress-bar>
-            </div>
-          </section>
-        </mat-toolbar-row>
-      </mat-toolbar>
-
-      <div class="container" id="translate-container">
-        @if (currentQueueItem) {
-        @if (isEnglishToChineseDirection) {
-          <mat-label class="w-full">
-            {{currentQueueItem.ensent}}
-          </mat-label>
-
-          <div class="w-full">
-            <mat-form-field class="control-full-width">
-              <input matInput type="text" [(ngModel)]="currentQueueItem.inputted">
-            </mat-form-field>
-          </div>
-        }
-        @if (isChineseToEnglishDirection) {
-          <mat-label class="w-full">
-            {{currentQueueItem.cnsent}}
-          </mat-label>
-
-          <div class="w-full">
-            <mat-form-field class="control-full-width">
-              <input matInput type="text" [(ngModel)]="currentQueueItem.inputted">
-            </mat-form-field>
-          </div>
-        }
-        }
-      </div>
-
-      <mat-divider></mat-divider>
-      <mat-toolbar class="container">
-        <mat-toolbar-row>
-          <span class="toolbar-spacer"></span>
-          <section>
-            <div class="example-button-container">
-              <button mat-flat-button (click)="onSubmitToNext()">
-                {{ t('submit') }}
-              </button>
-            </div>
-          </section>
-        </mat-toolbar-row>
-      </mat-toolbar>
-    }
-
-    @if (isTranslateCompleted) {
-      <div class="result-content">
-        <div>{{ t('translateExercises.timeCost') }}: {{( currentStatus.endTime.getTime() - currentStatus.startTime.getTime() ) / 1000}}</div>
-
-        <table mat-table [dataSource]="dataSourceResult" class="mat-elevation-z8 w-full">
-          <!-- English Sent Column -->
-          <ng-container matColumnDef="ensent">
-            <th mat-header-cell *matHeaderCellDef> {{ t('translateExercises.english') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.ensent}} </td>
-          </ng-container>
-
-<!-- English Words Column -->
-          <ng-container matColumnDef="enwords">
-            <th mat-header-cell *matHeaderCellDef> {{ t('translateExercises.words') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.enwords?.join(', ') || ''}} </td>
-          </ng-container>
-        
-          <!-- Chinese Sent Column -->
-          <ng-container matColumnDef="cnsent">
-            <th mat-header-cell *matHeaderCellDef> {{ t('translateExercises.chinese') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.cnsent}} </td>
-          </ng-container>
-
-          <!-- Inputted Sent Column -->
-          <ng-container matColumnDef="inputted">
-            <th mat-header-cell *matHeaderCellDef> {{ t('inputted') }} </th>
-            <td mat-cell *matCellDef="let element"> {{element.inputted}} </td>
-          </ng-container>
-        
-          <tr mat-header-row *matHeaderRowDef="displayedResultColumns; sticky: true"></tr>
-          <tr mat-row *matRowDef="let row; columns: displayedResultColumns;"></tr>
-        </table>
-      </div>
+    @switch (mode()) {
+      @case ('review') {
+        <app-translate-exercises-review-session
+          (quit)="onQuitReview()">
+        </app-translate-exercises-review-session>
+      }
+      @case ('typing') {
+        <app-translate-exercises-typing-session
+          (quit)="onQuitTyping()">
+        </app-translate-exercises-typing-session>
+      }
+      @case ('typingresult') {
+        <app-translate-exercises-typing-result
+          (backToList)="onQuitTyping()">
+        </app-translate-exercises-typing-result>
+      }
+      @case ('quiz') {
+        <app-translate-exercises-quiz-session
+          (quit)="onQuitQuiz()">
+        </app-translate-exercises-quiz-session>
+      }
+      @case ('quizresult') {
+        <app-translate-exercises-quiz-result
+          (backToList)="onQuitQuiz()">
+        </app-translate-exercises-quiz-result>
+      }
+      @default {
+        <app-translate-exercises-sentence-list
+          [allFiles]="allFiles()"
+          [(selectedFile)]="selectedFile"
+          [isLoadingContents]="isLoadingContents()"
+          [dataSource]="dataSource"
+          [selection]="selection"
+          [contentRatings]="contentRatingMap()"
+          [filterDefinition]="filterDefinition()"
+          [appliedFreeText]="freeText()"
+          (fileSelectionChanged)="onFileSelectionChanged($event)"
+          (freeTextChanged)="onFreeTextChanged($event)"
+          (defineFilter)="onDefineFilter()"
+          (clearFilter)="onClearFilter()"
+          (quickSelect)="onQuickSelect($event)"
+          (selectAllVisible)="onSelectAllVisible()"
+          (clearSelection)="onClearSelection()"
+          (allRowsToggled)="toggleAllRows()"
+          (contentRatingChanged)="onContentRatingChanged($event.item, $event.event)"
+          (playTts)="onPlayTTS($event)"
+          (llmExplain)="onLLMExplain($event)"
+          (showExplanation)="onShowExplanation($event)"
+          (showExtraInfo)="onShowExtraInfo($event)"
+          (translate)="onTypingWithOptions()"
+          (review)="onReviewWithOptions()"
+          (quiz)="onQuizWithOptions()"
+          (print)="onPrintWithOptions()">
+        </app-translate-exercises-sentence-list>
+      }
     }
   </div>
 </main>
diff --git a/src/app/pages/translate-exercises/translate-exercises.component.scss b/src/app/pages/translate-exercises/translate-exercises.component.scss
index b839f88..335f048 100644
--- a/src/app/pages/translate-exercises/translate-exercises.component.scss
+++ b/src/app/pages/translate-exercises/translate-exercises.component.scss
@@ -13,21 +13,7 @@
   justify-content: center;
 }
 
-.toolbar-spacer {
-  flex: 1 1 auto;
-}
-
-.control-full-width {
+.result-content {
   width: 100%;
-}
-
-.example-button-container {
-  display: flex;
-  justify-content: center;
-  width: 60px;
-}
-
-.page-toolbar-item {
-  margin-top: 4px;
-  padding-top: 4px;
+  margin: 24px;
 }
diff --git a/src/app/pages/translate-exercises/translate-exercises.component.spec.ts b/src/app/pages/translate-exercises/translate-exercises.component.spec.ts
index 333f417..1265423 100644
--- a/src/app/pages/translate-exercises/translate-exercises.component.spec.ts
+++ b/src/app/pages/translate-exercises/translate-exercises.component.spec.ts
@@ -1,7 +1,6 @@
 import type { ComponentFixture } from '@angular/core/testing';
 import { TestBed } from '@angular/core/testing';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
-import { MatSnackBar } from '@angular/material/snack-bar';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
 import {
@@ -10,34 +9,37 @@ import {
   TRANSLOCO_MISSING_HANDLER,
   TRANSLOCO_INTERCEPTOR,
 } from '@jsverse/transloco';
+import { FilterJoinType, FilterOperation, type IFilterDefinition } from 'actslib';
 import { of, throwError } from 'rxjs';
 import { vi } from 'vitest';
 
+import type { LearningContent, LearnEnglishSentFileItem } from '../../interfaces';
 import {
-  RatingOperatorEnum,
+  QuestionBankTypeEnum,
+  SelectionModeEnum,
+  SENTENCE_QUIZ_BLANK,
   TranslateDirectionEnum,
-  TranslateExerciseStatusEnum,
   TranslationAIModeEnum,
 } from '../../interfaces';
-import type { LearningContent, LearnEnglishSentFileItem } from '../../interfaces';
 import {
   LearningContentService,
-  UtilService,
   AudioService,
   AIService,
   UserCodeService,
   UIService,
 } from '../../services';
 import { LearningRatingService } from '../../services/learning-rating.service';
+import { SharedFilterDialogComponent } from '../../shared/filter-dialog';
 import { AppPageTitle } from '../page-title/page-title';
 
-import {
-  TranslateExercisesComponent,
-  TranslateExercisesOptionsDialogComponent,
-  TranslateExercisesPrintOptionsDialogComponent,
-  TranslateExercisesLLMDialogComponent,
-  TranslateSelectByRatingDialogComponent,
-} from './translate-exercises.component';
+import { TranslateExercisesInfoDialogComponent } from './translate-exercises-info-dialog.component';
+import { TranslateExercisesLLMDialogComponent } from './translate-exercises-llm-dialog.component';
+import { TranslateExercisesOptionsDialogComponent } from './translate-exercises-options-dialog.component';
+import { TranslateExercisesPrintOptionsDialogComponent } from './translate-exercises-printoptions-dialog.component';
+import { TranslateExercisesQuizOptionsDialogComponent } from './translate-exercises-quizoptions-dialog.component';
+import { TranslateExercisesReviewOptionsDialogComponent } from './translate-exercises-reviewoptions-dialog.component';
+import { TranslateExercisesSelectDialogComponent } from './translate-exercises-select-dialog.component';
+import { TranslateExercisesComponent } from './translate-exercises.component';
 
 const mockDataFiles: LearningContent[] = [
   { id: 1, categoryId: 2, nameEnglish: 'File1', nameChinese: '文件一', fileUrl: 'data/file1.json' },
@@ -45,9 +47,9 @@ const mockDataFiles: LearningContent[] = [
 ];
 
 const mockFileContent: LearnEnglishSentFileItem[] = [
-  { ensent: 'Hello world', cnsent: '你好世界', enwords: ['hello'] },
-  { ensent: 'Good morning', cnsent: '早上好', enwords: ['good'] },
-  { ensent: 'Thank you', cnsent: '谢谢', enwords: ['thank'] },
+  { id: '1', ensent: 'Hello world', cnsent: '你好世界', enwords: ['hello'] },
+  { id: '2', ensent: 'Good morning', cnsent: '早上好', enwords: ['good'] },
+  { id: '3', ensent: 'Thank you', cnsent: '谢谢', enwords: ['thank'] },
 ];
 
 describe('TranslateExercisesComponent', () => {
@@ -59,7 +61,7 @@ describe('TranslateExercisesComponent', () => {
   let mockUIService: any;
   let mockRouter: any;
   let mockDialog: any;
-  let mockSnackBar: any;
+  let mockRatingService: any;
   let mockPageTitle: AppPageTitle;
 
   beforeEach(async () => {
@@ -72,7 +74,7 @@ describe('TranslateExercisesComponent', () => {
     mockUIService = { setSelectedExerciseItem: vi.fn() };
     mockRouter = { navigate: vi.fn() };
     mockDialog = { open: vi.fn() };
-    mockSnackBar = { open: vi.fn() };
+    mockRatingService = { getRatings: vi.fn().mockReturnValue(of([])), upsertRating: vi.fn() };
     mockPageTitle = { title: '' } as AppPageTitle;
     mockLearningContentService.getSentenceContents.mockReturnValue(of(mockDataFiles));
 
@@ -81,27 +83,7 @@ describe('TranslateExercisesComponent', () => {
       getActiveLang: vi.fn(),
       selectTranslate: vi.fn().mockReturnValue(of('')),
       _loadDependencies: vi.fn().mockReturnValue(of(null)),
-      translate: vi.fn((key: string) => {
-        if (key === 'translateExercises.chineseToEnglish') {
-          return '中译英';
-        }
-        if (key === 'translateExercises.englishToChinese') {
-          return '英译中';
-        }
-        if (key === 'explain') {
-          return '讲解';
-        }
-        if (key === 'translateExercises.correct') {
-          return '纠正';
-        }
-        if (key === 'translateExercises.aiMode.explain') {
-          return '讲解';
-        }
-        if (key === 'translateExercises.aiMode.correct') {
-          return '纠正';
-        }
-        return key;
-      }),
+      translate: vi.fn((key: string) => key),
       activeLang: 'en',
       config: {
         reRenderOnLangChange: true,
@@ -120,10 +102,9 @@ describe('TranslateExercisesComponent', () => {
         { provide: UIService, useValue: mockUIService },
         { provide: Router, useValue: mockRouter },
         { provide: MatDialog, useValue: mockDialog },
-        { provide: MatSnackBar, useValue: mockSnackBar },
+        { provide: LearningRatingService, useValue: mockRatingService },
         { provide: AppPageTitle, useValue: mockPageTitle },
-        { provide: UtilService, useValue: {} },
-        { provide: UserCodeService, useValue: {} },
+        { provide: UserCodeService, useValue: { isUserCodeEntered: true } },
         { provide: TranslocoService, useValue: mockTranslocoService },
         { provide: TRANSLOCO_TRANSPILER, useValue: {} },
         { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
@@ -148,22 +129,7 @@ describe('TranslateExercisesComponent', () => {
     it('should load all data files on initialization', () => {
       fixture.detectChanges();
       expect(mockLearningContentService.getSentenceContents).toHaveBeenCalled();
-      expect(component.allFiles).toEqual(mockDataFiles);
-    });
-
-    it('should mark the OnPush view for check after the file list arrives (no click needed)', () => {
-      // Regression: the file list lands in an async subscribe callback (not a
-      // template event, not an async pipe). With ChangeDetectionStrategy.OnPush
-      // the view is not marked dirty automatically, so the files dropdown stayed
-      // empty until a later DOM event triggered detection. The component must
-      // call markForCheck() once the list is ready.
-      const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-      markForCheckSpy.mockClear();
-
-      fixture.detectChanges(); // runs ngOnInit → synchronous of() emit → next
-
-      expect(component.allFiles).toEqual(mockDataFiles);
-      expect(markForCheckSpy).toHaveBeenCalled();
+      expect(component.allFiles()).toEqual(mockDataFiles);
     });
 
     it('should handle error when loading data files fails', () => {
@@ -175,6 +141,7 @@ describe('TranslateExercisesComponent', () => {
       fixture.detectChanges();
 
       expect(console.error).toHaveBeenCalled();
+      expect(component.isLoadingContents()).toBe(false);
     });
   });
 
@@ -190,26 +157,41 @@ describe('TranslateExercisesComponent', () => {
       expect(component.dataSource.data).toEqual(mockFileContent);
     });
 
-    it('should clear recite queues when file is selected', () => {
+    it('should clear any existing selection when switching files', () => {
       mockLearningContentService.getSentenceFileContent.mockReturnValue(of(mockFileContent));
-      component.recitequeues = [
-        { ensent: 'test', cnsent: 'test', enwords: ['test'], completed: false, inputted: '' },
-      ];
+      component.dataSource.data = mockFileContent.slice();
+      component.selection.select(mockFileContent[0], mockFileContent[1]);
+      expect(component.selection.selected.length).toBe(2);
 
       component.onFileSelectionChanged({ value: mockDataFiles[0] } as any);
 
-      expect(component.recitequeues).toEqual([]);
+      expect(component.selection.selected.length).toBe(0);
+      expect(component.selection.isEmpty()).toBe(true);
     });
 
-    it('should handle undefined file content', () => {
-      mockLearningContentService.getSentenceFileContent.mockReturnValue(of(undefined));
+    it('should handle undefined file selection by clearing state', () => {
+      component.studyContentId = 5;
+      component.dataSource.data = mockFileContent.slice();
 
-      component.onFileSelectionChanged({ value: mockDataFiles[0] } as any);
+      component.onFileSelectionChanged({ value: undefined } as any);
 
       expect(component.dataSource.data.length).toBe(0);
+      expect(component.studyContentId).toBe(0);
+    });
+
+    it('should load ratings for the selected content', () => {
+      mockLearningContentService.getSentenceFileContent.mockReturnValue(of(mockFileContent));
+      mockRatingService.getRatings.mockReturnValue(
+        of([{ id: 1, contentId: 1, itemId: 2, rating: 4 }])
+      );
+
+      component.onFileSelectionChanged({ value: mockDataFiles[0] } as any);
+
+      expect(mockRatingService.getRatings).toHaveBeenCalledWith(1);
+      expect(component.getRating('2')).toBe(4);
     });
 
-    it('should handle error when loading file content fails', () => {
+    it('should clear data and content id when file content fails to load', () => {
       mockLearningContentService.getSentenceFileContent.mockReturnValue(
         throwError(() => new Error('Load failed'))
       );
@@ -217,206 +199,366 @@ describe('TranslateExercisesComponent', () => {
 
       component.onFileSelectionChanged({ value: mockDataFiles[0] } as any);
 
-      expect(console.error).toHaveBeenCalled();
+      expect(component.dataSource.data.length).toBe(0);
+      expect(component.studyContentId).toBe(0);
     });
+  });
 
-    it('should clear any existing selection when switching files', () => {
-      // Regression (shared across exercise pages): the SelectionModel retains
-      // references to the previous file's rows; switching files must clear it.
-      mockLearningContentService.getSentenceFileContent.mockReturnValue(of(mockFileContent));
+  describe('getRating', () => {
+    it('should resolve string ids through the rating item key', () => {
+      component.contentRatingMap.set(new Map([[42, 3]]));
+
+      expect(component.getRating('42')).toBe(3);
+      expect(component.getRating(undefined)).toBe(0);
+    });
+  });
+
+  describe('filter pipeline', () => {
+    beforeEach(() => {
       component.dataSource.data = mockFileContent.slice();
-      component.selection.select(mockFileContent[0], mockFileContent[1]);
-      expect(component.selection.selected.length).toBe(2);
+    });
 
-      component.onFileSelectionChanged({ value: mockDataFiles[0] } as any);
+    it('should apply live free text as a JSON filter and filter rows', () => {
+      component.onFreeTextChanged('hello');
 
-      expect(component.selection.selected.length).toBe(0);
-      expect(component.selection.isEmpty()).toBe(true);
+      expect(component.dataSource.filter).toContain('hello');
+      expect(component.dataSource.filteredData.length).toBe(1);
     });
-  });
 
-  describe('applyFilter', () => {
-    it('should filter data source with trimmed lowercase value', () => {
-      component.dataSource.data = mockFileContent;
-      const event = { target: { value: '  HELLO  ' } } as any;
+    it('should restore all rows when free text is cleared', () => {
+      component.onFreeTextChanged('hello');
+      component.onFreeTextChanged('');
 
-      component.applyFilter(event);
+      expect(component.dataSource.filter).toBe('');
+      expect(component.dataSource.filteredData.length).toBe(3);
+    });
+
+    /** Wrap conditions in an AND root, as the shared dialog emits them. */
+    const andRoot = (
+      ...conditions: IFilterDefinition['conditions']
+    ): IFilterDefinition => ({ join: FilterJoinType.AND, conditions });
+
+    it('should apply conditions emitted by the shared filter dialog on submit', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ root: andRoot({ property: 'ensent', operation: FilterOperation.BeginsWith, lowValue: 'good' }) })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onDefineFilter();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(SharedFilterDialogComponent, expect.anything());
+      expect(component.dataSource.filteredData.length).toBe(1);
+      expect(component.dataSource.filteredData[0].ensent).toBe('Good morning');
+    });
+
+    it('should seed the dialog with the current definition', () => {
+      const seed = andRoot({ property: 'cnsent', operation: FilterOperation.Contains, lowValue: '你' });
+      component.filterDefinition.set(seed);
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      expect(component.dataSource.filter).toBe('hello');
+      component.onDefineFilter();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        SharedFilterDialogComponent,
+        expect.objectContaining({
+          data: expect.objectContaining({ root: seed }),
+        })
+      );
     });
 
-    it('should filter with empty string', () => {
-      component.dataSource.data = mockFileContent;
-      const event = { target: { value: '' } } as any;
+    it('should leave the filter untouched when the dialog is cancelled', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      component.applyFilter(event);
+      component.onDefineFilter();
 
       expect(component.dataSource.filter).toBe('');
+      expect(component.dataSource.filteredData.length).toBe(3);
     });
-  });
 
-  describe('onPlayTTS', () => {
-    it('should call AI service to get TTS and play audio', () => {
-      const mockAudioUrl = 'http://example.com/audio.mp3';
-      mockAIService.getTTS.mockReturnValue(of({ audioFileUrl: mockAudioUrl }));
+    it('should apply rating conditions with unrated (0) semantics', () => {
+      component.contentRatingMap.set(new Map([[2, 5]]));
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ root: andRoot({ property: 'rating', operation: FilterOperation.Equal, lowValue: 5 }) })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      component.onPlayTTS('Hello world');
+      component.onDefineFilter();
 
-      expect(mockAIService.getTTS).toHaveBeenCalledWith('Hello world');
-      expect(mockAudioService.playSound).toHaveBeenCalledWith(mockAudioUrl, false);
+      expect(component.dataSource.filteredData.length).toBe(1);
+      expect(component.dataSource.filteredData[0].id).toBe('2');
     });
 
-    it('should handle error when TTS fails', () => {
-      mockAIService.getTTS.mockReturnValue(throwError(() => new Error('TTS failed')));
-      vi.spyOn(console, 'error').mockImplementation(() => {});
+    it('should apply nested AND/OR groups from the tree dialog', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({
+          root: andRoot(
+            { property: 'ensent', operation: FilterOperation.Contains, lowValue: 'o' },
+            {
+              join: FilterJoinType.OR,
+              conditions: [
+                { property: 'cnsent', operation: FilterOperation.Equal, lowValue: '谢谢' },
+                { property: 'cnsent', operation: FilterOperation.Equal, lowValue: '早上好' },
+              ],
+            }
+          ),
+        })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      component.onPlayTTS('Hello world');
+      component.onDefineFilter();
 
-      expect(console.error).toHaveBeenCalled();
+      // ensent contains 'o': all three rows pass; the OR then drops row 1
+      // ('你好世界' equals neither 谢谢 nor 早上好).
+      expect(component.dataSource.filteredData.map(r => r.id)).toEqual(['2', '3']);
     });
-  });
 
-  describe('onLLMExplain', () => {
-    it('should open LLM dialog with sentence', () => {
-      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+    it('should clear the filter definition', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ root: andRoot({ property: 'cnsent', operation: FilterOperation.Contains, lowValue: '你' }) })
+      ) };
       mockDialog.open.mockReturnValue(mockDialogRef);
+      component.onDefineFilter();
+      expect(component.dataSource.filteredData.length).toBe(1);
 
-      component.onLLMExplain('Test sentence');
+      component.onClearFilter();
 
-      expect(mockDialog.open).toHaveBeenCalledWith(TranslateExercisesLLMDialogComponent, {
-        data: { orgsent: 'Test sentence' },
-        width: '800px',
-        height: '570px',
-        enterAnimationDuration: 800,
-        exitAnimationDuration: 500,
-      });
+      expect(component.dataSource.filter).toBe('');
+      expect(component.dataSource.filteredData.length).toBe(3);
     });
   });
 
-  describe('onStart', () => {
+  describe('selection methods', () => {
     beforeEach(() => {
       component.dataSource.data = mockFileContent.slice();
     });
 
-    it('should start exercise with selected items', () => {
+    it('isAllSelected should return true when all selected', () => {
+      component.selection.select(...mockFileContent);
+      expect(component.isAllSelected()).toBe(true);
+    });
+
+    it('isAllSelected should return false when not all selected', () => {
+      component.selection.select(mockFileContent[0]);
+      expect(component.isAllSelected()).toBe(false);
+    });
+
+    it('toggleAllRows should select all when not all selected', () => {
+      component.toggleAllRows();
+      expect(component.selection.selected.length).toBe(mockFileContent.length);
+    });
+
+    it('toggleAllRows should clear selection when all selected', () => {
+      component.selection.select(...mockFileContent);
+      component.toggleAllRows();
+      expect(component.selection.selected.length).toBe(0);
+    });
+
+    it('toggleAllRows should scope to visible rows when a filter is active', () => {
+      component.onFreeTextChanged('morning');
+
+      component.toggleAllRows();
+
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockFileContent[1])).toBe(true);
+    });
+
+    it('onClearSelection should drop every selected row', () => {
       component.selection.select(mockFileContent[0], mockFileContent[1]);
 
-      component.onStart();
+      component.onClearSelection();
 
-      expect(component.recitequeues.length).toBe(2);
-      expect(component.queueidx).toBe(0);
-      expect(component.currentStatus.status).toBe(TranslateExerciseStatusEnum.InProgress);
+      expect(component.selection.isEmpty()).toBe(true);
     });
 
-    it('should start exercise with all items when nothing selected', () => {
-      component.setting.countOfItems = 2;
+    it('onSelectAllVisible should replace the selection with the visible rows', () => {
+      component.selection.select(mockFileContent[0]);
+      component.onFreeTextChanged('morning');
 
-      component.onStart();
+      component.onSelectAllVisible();
 
-      expect(component.recitequeues.length).toBe(2);
-      expect(component.queueidx).toBe(0);
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockFileContent[1])).toBe(true);
     });
+  });
 
-    it('should randomize and limit items when count exceeds setting', () => {
-      component.setting.countOfItems = 2;
+  describe('onQuickSelect', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockFileContent.slice();
+    });
 
-      component.onStart();
+    it("should open the select dialog in Free Selection mode for 'random' and apply the result", () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ selectedSelectMode: SelectionModeEnum.FreeSelection, countOfItems: 2 })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      expect(component.recitequeues.length).toBe(2);
+      component.onQuickSelect('random');
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        TranslateExercisesSelectDialogComponent,
+        expect.objectContaining({ data: { mode: SelectionModeEnum.FreeSelection, rowCount: 3 } })
+      );
+      expect(component.selection.selected.length).toBe(2);
     });
 
-    it('should initialize status correctly', () => {
+    it("should open the select dialog in By Count mode for 'sequence' and apply count + offset", () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(
+        of({ selectedSelectMode: SelectionModeEnum.ByCount, countOfItems: 1, countOfOffset: 2 })
+      ) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
+
+      component.onQuickSelect('sequence');
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        TranslateExercisesSelectDialogComponent,
+        expect.objectContaining({ data: { mode: SelectionModeEnum.ByCount, rowCount: 3 } })
+      );
+      expect(component.selection.selected.length).toBe(1);
+      expect(component.selection.isSelected(mockFileContent[2])).toBe(true);
+    });
+
+    it('should leave the selection untouched when the dialog is cancelled', () => {
       component.selection.select(mockFileContent[0]);
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
+      mockDialog.open.mockReturnValue(mockDialogRef);
 
-      component.onStart();
+      component.onQuickSelect('random');
 
-      expect(component.currentStatus.startTime).toBeInstanceOf(Date);
-      expect(component.currentStatus.totalCount).toBe(1);
-      expect(component.dataSourceResult).toEqual([]);
+      expect(component.selection.selected.length).toBe(1);
     });
   });
 
-  describe('onStartWithOptions', () => {
-    it('should open options dialog and start exercise on confirm', () => {
-      const mockResult = {
-        direction: TranslateDirectionEnum.ChineseToEnglish,
-        allowEmptyAnswer: true,
-        countOfItems: 10,
-      };
-      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(mockResult)) };
+  describe('onContentRatingChanged', () => {
+    it('should not save and should restore the previous selection when the toggle is deselected', () => {
+      // Clicking the active toggle in a mat-button-toggle-group deselects it,
+      // emitting change with value undefined.
+      component.studyContentId = 1;
+      const group = { value: undefined as unknown };
+      const event = { value: undefined, source: { value: 2, buttonToggleGroup: group } } as any;
+
+      component.onContentRatingChanged({ id: '10' } as any, event);
+
+      expect(mockRatingService.upsertRating).not.toHaveBeenCalled();
+      expect(group.value).toBe(2);
+    });
+
+    it('should save the rating and update the rating map', () => {
+      mockRatingService.upsertRating.mockReturnValue(of({ id: 1, contentId: 1, itemId: 42, rating: 5 }));
+      component.studyContentId = 1;
+      const event = { value: 5, source: {} } as any;
+
+      component.onContentRatingChanged({ id: '42' } as any, event);
+
+      expect(mockRatingService.upsertRating).toHaveBeenCalledWith(1, 42, 5);
+      expect(component.getRating('42')).toBe(5);
+    });
+
+    it('should revert the toggle when saving fails', () => {
+      mockRatingService.upsertRating.mockReturnValue(throwError(() => new Error('Save failed')));
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+      component.studyContentId = 1;
+      const group = { value: 5 as unknown };
+      const event = { value: 5, source: { value: 5, buttonToggleGroup: group } } as any;
+
+      component.onContentRatingChanged({ id: '42' } as any, event);
+
+      expect(group.value).toBe(0);
+    });
+  });
+
+  describe('onPlayTTS', () => {
+    it('should call AI service to get TTS and play audio', () => {
+      const mockAudioUrl = 'http://example.com/audio.mp3';
+      mockAIService.getTTS.mockReturnValue(of({ audioFileUrl: mockAudioUrl }));
+
+      component.onPlayTTS('Hello world');
+
+      expect(mockAIService.getTTS).toHaveBeenCalledWith('Hello world');
+      expect(mockAudioService.playSound).toHaveBeenCalledWith(mockAudioUrl, false);
+    });
+
+    it('should handle error when TTS fails', () => {
+      mockAIService.getTTS.mockReturnValue(throwError(() => new Error('TTS failed')));
+      vi.spyOn(console, 'error').mockImplementation(() => {});
+
+      component.onPlayTTS('Hello world');
+
+      expect(console.error).toHaveBeenCalled();
+    });
+  });
+
+  describe('dialog orchestration', () => {
+    it('onLLMExplain should open LLM dialog with sentence', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
       mockDialog.open.mockReturnValue(mockDialogRef);
-      component.dataSource.data = mockFileContent.slice();
-      vi.spyOn(component, 'onStart');
 
-      component.onStartWithOptions();
+      component.onLLMExplain('Test sentence');
 
-      expect(mockDialog.open).toHaveBeenCalled();
-      expect(component.setting.direction).toBe(TranslateDirectionEnum.ChineseToEnglish);
-      expect(component.setting.allowEmptyAnswer).toBe(true);
-      expect(component.setting.countOfItems).toBe(10);
-      expect(component.onStart).toHaveBeenCalled();
+      expect(mockDialog.open).toHaveBeenCalledWith(TranslateExercisesLLMDialogComponent, {
+        data: { orgsent: 'Test sentence' },
+        width: '800px',
+        height: '570px',
+        enterAnimationDuration: 800,
+        exitAnimationDuration: 500,
+      });
     });
 
-    it('should not start exercise when dialog is cancelled', () => {
+    it('onShowExplanation should open info dialog with the explanation title', () => {
       const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
       mockDialog.open.mockReturnValue(mockDialogRef);
-      vi.spyOn(component, 'onStart');
 
-      component.onStartWithOptions();
+      component.onShowExplanation('Some text');
 
-      expect(component.onStart).not.toHaveBeenCalled();
+      expect(mockDialog.open).toHaveBeenCalledWith(TranslateExercisesInfoDialogComponent, expect.objectContaining({
+        data: { titleKey: 'common.explanation', content: 'Some text' },
+      }));
     });
 
-    it('should mark the OnPush view for check when the start dialog confirms (no click needed)', () => {
-      // Regression: the exercise view switch (currentStatus.status = InProgress)
-      // happens in the async afterClosed callback. With ChangeDetectionStrategy.OnPush
-      // the view would not switch to the exercise screen without markForCheck.
-      const mockResult = {
-        direction: TranslateDirectionEnum.ChineseToEnglish,
-        allowEmptyAnswer: true,
-        countOfItems: 10,
-      };
-      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(mockResult)) };
+    it('onShowExtraInfo should join extra info entries', () => {
+      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
       mockDialog.open.mockReturnValue(mockDialogRef);
-      component.dataSource.data = mockFileContent.slice();
-      vi.spyOn(component, 'onStart');
-      const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-      markForCheckSpy.mockClear();
 
-      component.onStartWithOptions();
+      component.onShowExtraInfo(['a', 'b']);
 
-      expect(markForCheckSpy).toHaveBeenCalled();
+      expect(mockDialog.open).toHaveBeenCalledWith(TranslateExercisesInfoDialogComponent, expect.objectContaining({
+        data: { titleKey: 'common.extraInfo', content: 'a\n\nb' },
+      }));
     });
   });
 
   describe('onPrint', () => {
     beforeEach(() => {
       component.dataSource.data = mockFileContent.slice();
-      component.selectedFile = {
+      component.selectedFile.set({
         id: 99,
         categoryId: 2,
         nameEnglish: 'TestFile',
         nameChinese: '测试文件',
         fileUrl: 'data/testfile.json',
-      };
+      });
     });
 
     it('should print selected items', () => {
-      component.selection.select(mockFileContent[0]);
+      component.selection.select(mockFileContent[0], mockFileContent[1]);
 
       component.onPrint();
 
-      expect(mockUIService.setSelectedExerciseItem).toHaveBeenCalled();
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
+      const items = callArgs?.[0];
+      expect(items.length).toBe(2);
       expect(mockRouter.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
     });
 
-    it('should print all items when nothing selected', () => {
+    it('should print all visible items when nothing is selected', () => {
       component.printSetting.countOfItems = 2;
 
       component.onPrint();
 
-      expect(mockUIService.setSelectedExerciseItem).toHaveBeenCalled();
-      expect(mockRouter.navigate).toHaveBeenCalledWith(['/knowledge/displayv2']);
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
+      const items = callArgs?.[0];
+      expect(items.length).toBe(2);
     });
 
     it('should respect print direction setting', () => {
@@ -427,11 +569,36 @@ describe('TranslateExercisesComponent', () => {
 
       const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
       const items = callArgs?.[0];
-      expect(items[0].question).toContain(mockFileContent[0].cnsent);
+      expect(items[0].itemType).toBe(QuestionBankTypeEnum.FillInTheBlank);
+      // ChineseToEnglish: the CN sentence is the prompt, the EN sentence is the answer.
+      expect(items[0].question.startsWith(mockFileContent[0].cnsent)).toBe(true);
+      expect(items[0].question).toContain(`@${mockFileContent[0].ensent}@`);
+    });
+
+    it('should print the EN prompt with the CN answer in the default direction', () => {
+      component.selection.select(mockFileContent[0]);
+
+      component.onPrint();
+
+      const callArgs = mockUIService.setSelectedExerciseItem.mock.lastCall;
+      const items = callArgs?.[0];
+      expect(items[0].question).toContain(mockFileContent[0].ensent);
+      expect(items[0].question).toContain(`@${mockFileContent[0].cnsent}@`);
     });
   });
 
   describe('onPrintWithOptions', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockFileContent.slice();
+      component.selectedFile.set({
+        id: 99,
+        categoryId: 2,
+        nameEnglish: 'TestFile',
+        nameChinese: '测试文件',
+        fileUrl: 'data/testfile.json',
+      });
+    });
+
     it('should open print options dialog and print on confirm', () => {
       const mockResult = {
         printAnswer: true,
@@ -445,383 +612,687 @@ describe('TranslateExercisesComponent', () => {
       };
       const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(mockResult)) };
       mockDialog.open.mockReturnValue(mockDialogRef);
-      component.dataSource.data = mockFileContent.slice();
-      vi.spyOn(component, 'onPrint');
 
       component.onPrintWithOptions();
 
       expect(mockDialog.open).toHaveBeenCalled();
       expect(component.printSetting.printAnswer).toBe(true);
       expect(component.printSetting.printWord).toBe(true);
-      expect(component.onPrint).toHaveBeenCalled();
+      expect(mockUIService.setSelectedExerciseItem).toHaveBeenCalled();
     });
 
     it('should not print when dialog is cancelled', () => {
       const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
       mockDialog.open.mockReturnValue(mockDialogRef);
-      vi.spyOn(component, 'onPrint');
 
       component.onPrintWithOptions();
 
-      expect(component.onPrint).not.toHaveBeenCalled();
+      expect(mockUIService.setSelectedExerciseItem).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('visibleRowCount', () => {
+    it('should report the filtered count when a filter is active', () => {
+      component.dataSource.data = mockFileContent.slice();
+
+      expect(component.visibleRowCount).toBe(3);
+
+      component.onFreeTextChanged('hello');
+      expect(component.visibleRowCount).toBe(1);
     });
   });
 
-  describe('onSubmitToNext', () => {
+  describe('typing exercise', () => {
     beforeEach(() => {
-      component.recitequeues = [
-        { ensent: 'Hello', cnsent: '你好', enwords: ['hello'], completed: false, inputted: 'test' },
-      ];
-      component.queueidx = 0;
+      component.dataSource.data = mockFileContent.slice();
     });
 
-    it('should add current item to result and move to next', () => {
-      vi.spyOn(component, 'setQueueIndex');
+    it('onTypingStart should build the queue from the selection', () => {
+      component.selection.select(mockFileContent[0], mockFileContent[1]);
 
-      component.onSubmitToNext();
+      component.onTypingStart();
 
-      expect(component.dataSourceResult.length).toBe(1);
-      expect(component.dataSourceResult[0].inputted).toBe('test');
-      expect(component.setQueueIndex).toHaveBeenCalledWith(1);
+      expect(component.mode()).toBe('typing');
+      expect(component.typingStore.queue().length).toBe(2);
     });
-  });
 
-  describe('setQueueIndex', () => {
-    beforeEach(() => {
-      component.recitequeues = [
-        { ensent: 'A', cnsent: 'A', enwords: ['a'], completed: false, inputted: '' },
-        { ensent: 'B', cnsent: 'B', enwords: ['b'], completed: false, inputted: '' },
-      ];
-      component.queueidx = 0;
+    it('onTypingStart should cap the visible rows to countOfItems', () => {
+      component.typingSetting.countOfItems = 2;
+
+      component.onTypingStart();
+
+      expect(component.mode()).toBe('typing');
+      expect(component.typingStore.queue().length).toBe(2);
     });
 
-    it('should move to next valid index', () => {
-      component.setQueueIndex(1);
+    it('onTypingStart should stay on the list when there is nothing to type', () => {
+      component.dataSource.data = [];
+
+      component.onTypingStart();
 
-      expect(component.queueidx).toBe(1);
-      expect(component.recitequeues[0].completed).toBe(true);
+      expect(component.mode()).toBe('list');
+      expect(component.typingStore.queue().length).toBe(0);
     });
 
-    it('should complete exercise when reaching the end', () => {
-      component.setQueueIndex(2);
+    it('onTypingWithOptions should apply the dialog result and start the session', () => {
+      const mockResult = { direction: TranslateDirectionEnum.ChineseToEnglish, countOfItems: 10 };
+      mockDialog.open.mockReturnValue({ afterClosed: vi.fn().mockReturnValue(of(mockResult)) });
 
-      expect(component.currentStatus.status).toBe(TranslateExerciseStatusEnum.Completed);
-      expect(component.currentStatus.endTime).toBeInstanceOf(Date);
+      component.onTypingWithOptions();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        TranslateExercisesOptionsDialogComponent,
+        expect.objectContaining({
+          data: expect.objectContaining({
+            reciteQueuesCount: 3,
+            withSelection: false,
+            currentSettings: component.typingSetting,
+          }),
+        })
+      );
+      expect(component.typingSetting.direction).toBe(TranslateDirectionEnum.ChineseToEnglish);
+      expect(component.typingSetting.countOfItems).toBe(10);
+      expect(component.mode()).toBe('typing');
+      expect(component.typingStore.queue().length).toBe(3);
     });
 
-    it('should not change index when out of bounds below', () => {
-      component.setQueueIndex(-1);
+    it('onTypingWithOptions should stay on the list when cancelled', () => {
+      mockDialog.open.mockReturnValue({ afterClosed: vi.fn().mockReturnValue(of(undefined)) });
+
+      component.onTypingWithOptions();
 
-      expect(component.queueidx).toBe(0);
+      expect(component.mode()).toBe('list');
+      expect(component.typingStore.queue().length).toBe(0);
     });
 
-    it('should mark current item as completed before moving', () => {
-      component.setQueueIndex(1);
+    it('should switch to the result screen when the store completes the queue', () => {
+      component.selection.select(mockFileContent[0]);
+      component.onTypingStart();
+      expect(component.mode()).toBe('typing');
+
+      component.typingStore.setInput('anything');
+      component.typingStore.submitAndNext();
+      // The container's effect (typing → typingresult) is flushed by change detection.
+      fixture.detectChanges();
 
-      expect(component.recitequeues[0].completed).toBe(true);
+      expect(component.mode()).toBe('typingresult');
+    });
+
+    it('onQuitTyping should reset the store and return to the list', () => {
+      component.selection.select(mockFileContent[0]);
+      component.onTypingStart();
+      expect(component.mode()).toBe('typing');
+
+      component.onQuitTyping();
+
+      expect(component.mode()).toBe('list');
+      expect(component.typingStore.queue().length).toBe(0);
+      expect(component.typingStore.results().length).toBe(0);
     });
   });
 
-  describe('getter methods', () => {
-    it('isTranslateNotStarted should return true when not started', () => {
-      component.currentStatus.status = TranslateExerciseStatusEnum.NotStarted;
-      expect(component.isTranslateNotStarted).toBe(true);
+  describe('review exercise', () => {
+    beforeEach(() => {
+      component.dataSource.data = mockFileContent.slice();
+      mockAIService.getTTS.mockReturnValue(of({ audioFileUrl: 'audio/tts.mp3' }));
     });
 
-    it('isTranslateInProgress should return true when in progress', () => {
-      component.currentStatus.status = TranslateExerciseStatusEnum.InProgress;
-      expect(component.isTranslateInProgress).toBe(true);
+    it('onReviewCore should build the queue from the selection (shuffled)', () => {
+      component.selection.select(mockFileContent[0], mockFileContent[1]);
+
+      component.onReviewCore();
+
+      expect(component.mode()).toBe('review');
+      expect(component.reviewStore.queue().length).toBe(2);
+      expect(
+        component.reviewStore.queue().every(q => q.itemId !== undefined)
+      ).toBe(true);
     });
 
-    it('isTranslateCompleted should return true when completed', () => {
-      component.currentStatus.status = TranslateExerciseStatusEnum.Completed;
-      expect(component.isTranslateCompleted).toBe(true);
+    it('onReviewCore should cap the visible rows to countOfItems', () => {
+      component.reviewSetting.countOfItems = 2;
+
+      component.onReviewCore();
+
+      expect(component.mode()).toBe('review');
+      expect(component.reviewStore.queue().length).toBe(2);
     });
 
-    it('reciteQueuesCount should return data source length', () => {
-      component.dataSource.data = mockFileContent;
-      expect(component.reciteQueuesCount).toBe(3);
+    it('onReviewCore should stay on the list when there is nothing to review', () => {
+      component.dataSource.data = [];
+
+      component.onReviewCore();
+
+      expect(component.mode()).toBe('list');
+      expect(component.reviewStore.queue().length).toBe(0);
     });
 
-    it('currentQueueItem should return current queue item', () => {
-      component.recitequeues = [
-        { ensent: 'A', cnsent: 'A', enwords: ['a'], completed: false, inputted: '' },
-      ];
-      component.queueidx = 0;
-      expect(component.currentQueueItem).toEqual(component.recitequeues[0]);
+    it('onReviewWithOptions should apply the dialog result and start the session', () => {
+      const mockResult = { disableVoice: true, countOfItems: 10 };
+      mockDialog.open.mockReturnValue({ afterClosed: vi.fn().mockReturnValue(of(mockResult)) });
+
+      component.onReviewWithOptions();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        TranslateExercisesReviewOptionsDialogComponent,
+        expect.objectContaining({
+          data: expect.objectContaining({
+            sentenceQueueCount: 3,
+            withSelection: false,
+            currentSettings: component.reviewSetting,
+          }),
+        })
+      );
+      expect(component.reviewSetting.disableVoice).toBe(true);
+      expect(component.reviewSetting.countOfItems).toBe(10);
+      expect(component.mode()).toBe('review');
+      expect(component.reviewStore.queue().length).toBe(3);
     });
 
-    it('currentProgress should calculate progress percentage', () => {
-      component.dataSource.data = mockFileContent;
-      component.queueidx = 1;
-      expect(component.currentProgress).toBeCloseTo(33.33, 1);
+    it('onReviewWithOptions should stay on the list when cancelled', () => {
+      mockDialog.open.mockReturnValue({ afterClosed: vi.fn().mockReturnValue(of(undefined)) });
+
+      component.onReviewWithOptions();
+
+      expect(component.mode()).toBe('list');
+      expect(component.reviewStore.queue().length).toBe(0);
     });
 
-    it('isEnglishToChineseDirection should return true for English to Chinese', () => {
-      component.setting.direction = TranslateDirectionEnum.EnglishToChinese;
-      expect(component.isEnglishToChineseDirection).toBe(true);
+    it('onQuitReview should merge the confirmed ratings into the rating map and return to the list', () => {
+      component.studyContentId = 1;
+      component.selection.select(mockFileContent[0]);
+      component.onReviewCore();
+      mockRatingService.upsertRating.mockReturnValue(
+        of({ contentId: 1, itemId: 1, rating: 4 })
+      );
+      component.reviewStore.rateCurrent(4);
+      component.contentRatingMap.set(new Map([[2, 5]]));
+
+      component.onQuitReview();
+
+      expect(component.mode()).toBe('list');
+      expect(component.reviewStore.queue().length).toBe(0);
+      expect(component.getRating('1')).toBe(4);
+      expect(component.getRating('2')).toBe(5);
     });
 
-    it('isChineseToEnglishDirection should return true for Chinese to English', () => {
-      component.setting.direction = TranslateDirectionEnum.ChineseToEnglish;
-      expect(component.isChineseToEnglishDirection).toBe(true);
+    it('onQuitReview should re-run an active rating filter after merging', () => {
+      component.studyContentId = 1;
+      component.contentRatingMap.set(new Map());
+      component.onFreeTextChanged('hello');
+      component.selection.select(mockFileContent[0]);
+      component.onReviewCore();
+      mockRatingService.upsertRating.mockReturnValue(
+        of({ contentId: 1, itemId: 1, rating: 4 })
+      );
+      component.reviewStore.rateCurrent(4);
+
+      component.onQuitReview();
+
+      // The free-text filter still matches row 1, and the merge ran; a rating
+      // filter would now see the new value (the reassignment happened without
+      // erroring).
+      expect(component.getRating('1')).toBe(4);
     });
   });
 
-  describe('selection methods', () => {
+  describe('quiz exercise', () => {
     beforeEach(() => {
       component.dataSource.data = mockFileContent.slice();
     });
 
-    it('isAllSelected should return true when all selected', () => {
-      component.selection.select(...mockFileContent);
-      expect(component.isAllSelected()).toBe(true);
+    it('onQuizStart should build questions from the selection', () => {
+      component.selection.select(mockFileContent[0], mockFileContent[1]);
+
+      component.onQuizStart();
+
+      expect(component.mode()).toBe('quiz');
+      expect(component.quizStore.questions().length).toBe(2);
+      expect(
+        component.quizStore.questions().every(
+          q => q.ensent && q.cnsent && q.prompt.includes(SENTENCE_QUIZ_BLANK) && q.options.length >= 2
+        )
+      ).toBe(true);
     });
 
-    it('isAllSelected should return false when not all selected', () => {
-      component.selection.select(mockFileContent[0]);
-      expect(component.isAllSelected()).toBe(false);
+    it('onQuizStart should cap the visible rows to countOfItems', () => {
+      component.quizSetting.countOfItems = 2;
+
+      component.onQuizStart();
+
+      expect(component.mode()).toBe('quiz');
+      expect(component.quizStore.questions().length).toBe(2);
     });
 
-    it('toggleAllRows should select all when not all selected', () => {
-      component.toggleAllRows();
-      expect(component.selection.selected.length).toBe(mockFileContent.length);
+    it('onQuizStart should stay on the list when no question can be built', () => {
+      component.dataSource.data = [];
+
+      component.onQuizStart();
+
+      expect(component.mode()).toBe('list');
+      expect(component.quizStore.questions().length).toBe(0);
     });
 
-    it('toggleAllRows should clear selection when all selected', () => {
-      component.selection.select(...mockFileContent);
-      component.toggleAllRows();
-      expect(component.selection.selected.length).toBe(0);
+    it('onQuizWithOptions should apply the dialog result and start the session', () => {
+      const mockResult = { countOfItems: 10 };
+      mockDialog.open.mockReturnValue({ afterClosed: vi.fn().mockReturnValue(of(mockResult)) });
+
+      component.onQuizWithOptions();
+
+      expect(mockDialog.open).toHaveBeenCalledWith(
+        TranslateExercisesQuizOptionsDialogComponent,
+        expect.objectContaining({
+          data: expect.objectContaining({
+            sentenceQueueCount: 3,
+            withSelection: false,
+            currentSettings: component.quizSetting,
+          }),
+        })
+      );
+      expect(component.quizSetting.countOfItems).toBe(10);
+      expect(component.mode()).toBe('quiz');
+      expect(component.quizStore.questions().length).toBe(3);
     });
-  });
 
-  describe('getDirectionName', () => {
-    it('should return correct name for Chinese to English', () => {
-      expect(component.getDirectionName(TranslateDirectionEnum.ChineseToEnglish)).toBe('中译英');
+    it('onQuizWithOptions should stay on the list when cancelled', () => {
+      mockDialog.open.mockReturnValue({ afterClosed: vi.fn().mockReturnValue(of(undefined)) });
+
+      component.onQuizWithOptions();
+
+      expect(component.mode()).toBe('list');
+      expect(component.quizStore.questions().length).toBe(0);
     });
 
-    it('should return correct name for English to Chinese', () => {
-      expect(component.getDirectionName(TranslateDirectionEnum.EnglishToChinese)).toBe('英译中');
+    it('should switch to the result screen when the last question is answered', () => {
+      component.selection.select(mockFileContent[0]);
+      component.onQuizStart();
+      expect(component.mode()).toBe('quiz');
+
+      // Answer every question and advance through the queue.
+      for (let i = 0; i < component.quizStore.questions().length; i++) {
+        component.quizStore.answer(0);
+        component.quizStore.next();
+      }
+      // The container's effect (quiz → quizresult) is flushed by change detection.
+      fixture.detectChanges();
+
+      expect(component.mode()).toBe('quizresult');
+    });
+
+    it('onQuitQuiz should reset the store and return to the list', () => {
+      component.selection.select(mockFileContent[0]);
+      component.onQuizStart();
+      expect(component.mode()).toBe('quiz');
+
+      component.onQuitQuiz();
+
+      expect(component.mode()).toBe('list');
+      expect(component.quizStore.questions().length).toBe(0);
+      expect(component.quizStore.results().length).toBe(0);
     });
   });
+});
 
-  describe('onSelectByRating', () => {
-    beforeEach(() => {
-      component.dataSource.data = [
-        { ensent: 's1', cnsent: 'c1', enwords: [], id: '1' },
-        { ensent: 's2', cnsent: 'c2', enwords: [], id: '2' },
-        { ensent: 's3', cnsent: 'c3', enwords: [], id: '3' },
-      ] as LearnEnglishSentFileItem[];
-      // Set up ratings: id1=5, id2=3, id3=0 (unrated). getRating() parses the
-      // string id to a number, so the map is keyed by numeric id.
-      (component as any).contentRatingMap.set(1, 5);
-      (component as any).contentRatingMap.set(2, 3);
-      (component as any).contentRatingMap.set(3, 0);
-    });
-
-    it('should select items with rating equals 5', () => {
-      const mockDialogRef = {
-        afterClosed: vi
-          .fn()
-          .mockReturnValue(of({ ratingOperator: RatingOperatorEnum.Equals, ratingValue: 5 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
+describe('TranslateExercisesSelectDialogComponent', () => {
+  let component: TranslateExercisesSelectDialogComponent;
+  let fixture: ComponentFixture<TranslateExercisesSelectDialogComponent>;
+  let mockDialogRef: any;
 
-      component.onSelectByRating();
+  function createWithMode(mode: SelectionModeEnum, rowCount?: number): void {
+    TestBed.overrideProvider(MAT_DIALOG_DATA, { useValue: { mode, rowCount } });
+    fixture = TestBed.createComponent(TranslateExercisesSelectDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }
 
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe('1');
+  beforeEach(async () => {
+    mockDialogRef = { close: vi.fn() };
+
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesSelectDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: { mode: SelectionModeEnum.FreeSelection } },
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+  });
+
+  it('should create', () => {
+    createWithMode(SelectionModeEnum.FreeSelection);
+    expect(component).toBeTruthy();
+  });
+
+  it('should reject a non-positive count', () => {
+    createWithMode(SelectionModeEnum.FreeSelection);
+    component.countOfItems.set(0);
+    expect(component.isFormInvalid).toBe(true);
+
+    component.countOfItems.set(3);
+    expect(component.isFormInvalid).toBe(false);
+  });
+
+  it('should reject an offset beyond the row count in By Count mode', () => {
+    createWithMode(SelectionModeEnum.ByCount, 3);
+    component.countOfItems.set(2);
+    component.countOfOffset.set(3);
+    expect(component.isFormInvalid).toBe(true);
+
+    component.countOfOffset.set(2);
+    expect(component.isFormInvalid).toBe(false);
+  });
+
+  it('should return the count on Free Selection confirm', () => {
+    createWithMode(SelectionModeEnum.FreeSelection);
+    component.countOfItems.set(5);
+
+    component.onYesClick();
+
+    expect(mockDialogRef.close).toHaveBeenCalledWith({
+      selectedSelectMode: SelectionModeEnum.FreeSelection,
+      countOfItems: 5,
     });
+  });
 
-    it('should select items with rating greater than 3', () => {
-      const mockDialogRef = {
-        afterClosed: vi
-          .fn()
-          .mockReturnValue(of({ ratingOperator: RatingOperatorEnum.GreaterThan, ratingValue: 3 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
+  it('should clamp count and offset on By Count confirm', () => {
+    createWithMode(SelectionModeEnum.ByCount, 3);
+    component.countOfItems.set(2);
+    component.countOfOffset.set(2);
 
-      component.onSelectByRating();
+    component.onYesClick();
 
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe('1');
+    expect(mockDialogRef.close).toHaveBeenCalledWith({
+      selectedSelectMode: SelectionModeEnum.ByCount,
+      countOfItems: 2,
+      countOfOffset: 2,
     });
+  });
 
-    it('should select items with any rating (>= 1)', () => {
-      // ratings: id1=5, id2=3, id3=0. LargerOrEquals 1 → id1, id2.
-      const mockDialogRef = {
-        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
+  it('should close without data on cancel', () => {
+    createWithMode(SelectionModeEnum.FreeSelection);
 
-      component.onSelectByRating();
+    component.onNoClick();
 
-      expect(component.selection.selected.length).toBe(2);
+    expect(mockDialogRef.close).toHaveBeenCalledWith();
+  });
+});
+
+describe('TranslateExercisesOptionsDialogComponent', () => {
+  let component: TranslateExercisesOptionsDialogComponent;
+  let fixture: ComponentFixture<TranslateExercisesOptionsDialogComponent>;
+  let mockDialogRef: any;
+
+  beforeEach(async () => {
+    mockDialogRef = { close: vi.fn() };
+
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesOptionsDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            reciteQueuesCount: 20,
+            withSelection: false,
+          },
+        },
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslateExercisesOptionsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should initialize with correct default values', () => {
+    expect(component.countOfItems()).toBe(20);
+    expect(component.direction()).toBe(TranslateDirectionEnum.EnglishToChinese);
+  });
+
+  it('should close dialog without data on cancel', () => {
+    component.onNoClick();
+    expect(mockDialogRef.close).toHaveBeenCalledWith();
+  });
+
+  it('should close dialog with data on confirm', () => {
+    component.countOfItems.set(15);
+    component.direction.set(TranslateDirectionEnum.ChineseToEnglish);
+
+    component.onYesClick();
+
+    expect(mockDialogRef.close).toHaveBeenCalledWith({
+      countOfItems: 15,
+      direction: TranslateDirectionEnum.ChineseToEnglish,
     });
+  });
 
-    it('should select items with no rating (< 1)', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 1 → only id3 (unrated, 0 < 1).
-      const mockDialogRef = {
-        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
+  it('getDirectionName should return the localized direction names', () => {
+    expect(component.getDirectionName(TranslateDirectionEnum.ChineseToEnglish)).toBe(
+      'translateExercises.chineseToEnglish'
+    );
+    expect(component.getDirectionName(TranslateDirectionEnum.EnglishToChinese)).toBe(
+      'translateExercises.englishToChinese'
+    );
+  });
+});
+
+describe('TranslateExercisesOptionsDialogComponent data seeding', () => {
+  let component: TranslateExercisesOptionsDialogComponent;
+  let fixture: ComponentFixture<TranslateExercisesOptionsDialogComponent>;
+  let mockDialogRef: any;
+
+  function createWithData(data: Record<string, unknown>): void {
+    TestBed.overrideProvider(MAT_DIALOG_DATA, { useValue: data });
+    fixture = TestBed.createComponent(TranslateExercisesOptionsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }
+
+  beforeEach(async () => {
+    mockDialogRef = { close: vi.fn() };
+
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
 
-      component.onSelectByRating();
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesOptionsDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+  });
 
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe('3');
+  it('should seed from currentSettings when provided', () => {
+    createWithData({
+      reciteQueuesCount: 20,
+      withSelection: false,
+      currentSettings: {
+        countOfItems: 7,
+        direction: TranslateDirectionEnum.ChineseToEnglish,
+      },
     });
 
-    it('should select items with rating below the value, including unrated (0)', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 4 → id2 (3) and id3 (0);
-      // unrated (0) compares numerically (0 < 4); use < 1 for unrated-only.
-      const mockDialogRef = {
-        afterClosed: vi
-          .fn()
-          .mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 4 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
+    expect(component.countOfItems()).toBe(7);
+    expect(component.direction()).toBe(TranslateDirectionEnum.ChineseToEnglish);
+  });
 
-      expect(component.selection.selected.length).toBe(2);
-      expect(component.selection.selected.some(i => i.id === '2')).toBe(true);
-      expect(component.selection.selected.some(i => i.id === '3')).toBe(true);
+  it('should pin the count to the selection size when a selection is active', () => {
+    createWithData({
+      reciteQueuesCount: 9,
+      withSelection: true,
+      currentSettings: {
+        countOfItems: 7,
+        direction: TranslateDirectionEnum.ChineseToEnglish,
+      },
     });
 
-    it('should select only unrated (0) items when no rated item is below the value', () => {
-      // ratings: id1=5, id2=3, id3=0. LessThan 2 → only id3 (unrated, 0 < 2).
-      const mockDialogRef = {
-        afterClosed: vi
-          .fn()
-          .mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 2 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
+    expect(component.countOfItems()).toBe(9);
+    expect(component.direction()).toBe(TranslateDirectionEnum.ChineseToEnglish);
+  });
+});
 
-      component.onSelectByRating();
+describe('TranslateExercisesReviewOptionsDialogComponent', () => {
+  let component: TranslateExercisesReviewOptionsDialogComponent;
+  let fixture: ComponentFixture<TranslateExercisesReviewOptionsDialogComponent>;
+  let mockDialogRef: any;
 
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe('3');
-    });
+  function createWithData(data: Record<string, unknown>): void {
+    TestBed.overrideProvider(MAT_DIALOG_DATA, { useValue: data });
+    fixture = TestBed.createComponent(TranslateExercisesReviewOptionsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }
 
-    it('should select items with rating larger or equals 3', () => {
-      // ratings: id1=5, id2=3, id3=0. LargerOrEquals 3 → id1, id2.
-      const mockDialogRef = {
-        afterClosed: vi
-          .fn()
-          .mockReturnValue(
-            of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 3 })
-          ),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
+  beforeEach(async () => {
+    mockDialogRef = { close: vi.fn() };
 
-      component.onSelectByRating();
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
 
-      expect(component.selection.selected.length).toBe(2);
-      expect(component.selection.selected.some(i => i.id === '1')).toBe(true);
-      expect(component.selection.selected.some(i => i.id === '2')).toBe(true);
-    });
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesReviewOptionsDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+  });
 
-    it('should select items with rating less or equals 3, including unrated', () => {
-      // ratings: id1=5, id2=3, id3=0. LessOrEquals 3 → id2 (3) and id3 (0);
-      // unrated (0) compares numerically (0 <= 3).
-      const mockDialogRef = {
-        afterClosed: vi
-          .fn()
-          .mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 3 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
+  it('should create with defaults', () => {
+    createWithData({ sentenceQueueCount: 20, withSelection: false });
 
-      component.onSelectByRating();
+    expect(component).toBeTruthy();
+    expect(component.disableVoice()).toBe(false);
+    expect(component.countOfItems()).toBe(20);
+  });
 
-      expect(component.selection.selected.length).toBe(2);
-      expect(component.selection.selected.some(i => i.id === '2')).toBe(true);
-      expect(component.selection.selected.some(i => i.id === '3')).toBe(true);
+  it('should seed from currentSettings when provided', () => {
+    createWithData({
+      sentenceQueueCount: 20,
+      withSelection: false,
+      currentSettings: { countOfItems: 7, disableVoice: true },
     });
 
-    it('should select only unrated (0) for less or equals when no rated item is at or below the value', () => {
-      // ratings: id1=5, id2=3, id3=0. LessOrEquals 2 → only id3 (unrated, 0 <= 2).
-      const mockDialogRef = {
-        afterClosed: vi
-          .fn()
-          .mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LessOrEquals, ratingValue: 2 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
+    expect(component.countOfItems()).toBe(7);
+    expect(component.disableVoice()).toBe(true);
+  });
 
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe('3');
+  it('should pin the count to the selection size when a selection is active', () => {
+    createWithData({
+      sentenceQueueCount: 9,
+      withSelection: true,
+      currentSettings: { countOfItems: 7, disableVoice: false },
     });
 
-    it('should clear the previous selection before applying the new rating match', () => {
-      component.selection.select(component.dataSource.data[0]);
-      expect(component.selection.selected.length).toBe(1);
-
-      const mockDialogRef = {
-        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LessThan, ratingValue: 1 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
-
-      component.onSelectByRating();
-
-      // < 1 matches only id3 (unrated); the previously selected id1 is dropped.
-      expect(component.selection.selected.length).toBe(1);
-      expect(component.selection.selected[0].id).toBe('3');
-    });
+    expect(component.countOfItems()).toBe(9);
+  });
 
-    it('should preserve the existing selection when the dialog is cancelled', () => {
-      component.selection.select(component.dataSource.data[0]);
-      const initialCount = component.selection.selected.length;
+  it('isCountInvalid should reject non-integer and non-positive counts', () => {
+    createWithData({ sentenceQueueCount: 20, withSelection: false });
 
-      const mockDialogRef = { afterClosed: vi.fn().mockReturnValue(of(undefined)) };
-      mockDialog.open.mockReturnValue(mockDialogRef);
+    component.countOfItems.set(0);
+    expect(component.isCountInvalid).toBe(true);
 
-      component.onSelectByRating();
+    component.countOfItems.set(2.5);
+    expect(component.isCountInvalid).toBe(true);
 
-      expect(component.selection.selected.length).toBe(initialCount);
-    });
+    component.countOfItems.set(3);
+    expect(component.isCountInvalid).toBe(false);
+  });
 
-    it('should mark the OnPush view for check after applying the rating selection (no click needed)', () => {
-      // Regression: the rating-based selection is applied in the async
-      // afterClosed callback. With ChangeDetectionStrategy.OnPush the
-      // checkboxes would not reflect the new selection without markForCheck.
-      const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-      markForCheckSpy.mockClear();
-      const mockDialogRef = {
-        afterClosed: vi.fn().mockReturnValue(of({ ratingOperator: RatingOperatorEnum.LargerOrEquals, ratingValue: 1 })),
-      };
-      mockDialog.open.mockReturnValue(mockDialogRef);
+  it('should close without data on cancel', () => {
+    createWithData({ sentenceQueueCount: 20, withSelection: false });
 
-      component.onSelectByRating();
+    component.onNoClick();
 
-      expect(markForCheckSpy).toHaveBeenCalled();
-    });
+    expect(mockDialogRef.close).toHaveBeenCalledWith();
   });
 
-  describe('onContentRatingChanged', () => {
-    it('should not save and should restore the previous selection when the toggle is deselected', () => {
-      // Clicking the active toggle in a mat-button-toggle-group deselects it,
-      // emitting change with value undefined.
-      const ratingService = TestBed.inject(LearningRatingService);
-      const upsertSpy = vi.spyOn(ratingService, 'upsertRating');
-      component.studyContentId = 1;
-      const group = { value: undefined as unknown };
-      const event = { value: undefined, source: { value: 2, buttonToggleGroup: group } } as any;
+  it('should close with the options on confirm', () => {
+    createWithData({ sentenceQueueCount: 20, withSelection: false });
+    component.countOfItems.set(15);
+    component.disableVoice.set(true);
 
-      component.onContentRatingChanged({ id: '10' } as any, event);
+    component.onYesClick();
 
-      expect(upsertSpy).not.toHaveBeenCalled();
-      expect(group.value).toBe(2);
-    });
+    expect(mockDialogRef.close).toHaveBeenCalledWith({ disableVoice: true, countOfItems: 15 });
   });
 });
 
-describe('TranslateExercisesOptionsDialogComponent', () => {
-  let component: TranslateExercisesOptionsDialogComponent;
-  let fixture: ComponentFixture<TranslateExercisesOptionsDialogComponent>;
+describe('TranslateExercisesQuizOptionsDialogComponent', () => {
+  let component: TranslateExercisesQuizOptionsDialogComponent;
+  let fixture: ComponentFixture<TranslateExercisesQuizOptionsDialogComponent>;
   let mockDialogRef: any;
 
+  function createWithData(data: Record<string, unknown>): void {
+    TestBed.overrideProvider(MAT_DIALOG_DATA, { useValue: data });
+    fixture = TestBed.createComponent(TranslateExercisesQuizOptionsDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  }
+
   beforeEach(async () => {
     mockDialogRef = { close: vi.fn() };
 
@@ -832,70 +1303,91 @@ describe('TranslateExercisesOptionsDialogComponent', () => {
       _loadDependencies: vi.fn().mockReturnValue(of(null)),
       translate: vi.fn((key: string) => key),
       activeLang: 'en',
-      config: {
-        reRenderOnLangChange: true,
-        prodMode: false,
-      },
+      config: { reRenderOnLangChange: true, prodMode: false },
       langChanges$: of('en'),
       events$: of(),
     };
 
     await TestBed.configureTestingModule({
-      imports: [TranslateExercisesOptionsDialogComponent, NoopAnimationsModule],
+      imports: [TranslateExercisesQuizOptionsDialogComponent, NoopAnimationsModule],
       providers: [
         { provide: MatDialogRef, useValue: mockDialogRef },
-        {
-          provide: MAT_DIALOG_DATA,
-          useValue: {
-            reciteQueuesCount: 20,
-            withSelection: false,
-            allDirections: [
-              { value: TranslateDirectionEnum.ChineseToEnglish },
-              { value: TranslateDirectionEnum.EnglishToChinese },
-            ],
-            getDirectionName: (dir: TranslateDirectionEnum) =>
-              dir === TranslateDirectionEnum.ChineseToEnglish ? '中译英' : '英译中',
-          },
-        },
+        { provide: MAT_DIALOG_DATA, useValue: {} },
         { provide: TranslocoService, useValue: mockTranslocoService },
         { provide: TRANSLOCO_TRANSPILER, useValue: {} },
         { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
         { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
       ],
     }).compileComponents();
-
-    fixture = TestBed.createComponent(TranslateExercisesOptionsDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
   });
 
-  it('should create', () => {
+  it('should create with defaults', () => {
+    createWithData({ sentenceQueueCount: 20, withSelection: false });
+
     expect(component).toBeTruthy();
+    expect(component.countOfItems()).toBe(20);
   });
 
-  it('should initialize with correct default values', () => {
-    expect(component.countOfItems()).toBe(20);
-    expect(component.allowEmptyAnswer()).toBe(false);
-    expect(component.direction()).toBe(TranslateDirectionEnum.EnglishToChinese);
+  it('should seed from currentSettings when provided', () => {
+    createWithData({
+      sentenceQueueCount: 20,
+      withSelection: false,
+      currentSettings: { countOfItems: 7 },
+    });
+
+    expect(component.countOfItems()).toBe(7);
   });
 
-  it('should close dialog without data on cancel', () => {
+  it('should pin the count to the selection size when a selection is active', () => {
+    createWithData({
+      sentenceQueueCount: 9,
+      withSelection: true,
+      currentSettings: { countOfItems: 7 },
+    });
+
+    expect(component.countOfItems()).toBe(9);
+  });
+
+  it('isCountInvalid should reject non-integer and non-positive counts', () => {
+    createWithData({ sentenceQueueCount: 20, withSelection: false });
+
+    component.countOfItems.set(0);
+    expect(component.isCountInvalid).toBe(true);
+
+    component.countOfItems.set(2.5);
+    expect(component.isCountInvalid).toBe(true);
+
+    component.countOfItems.set(3);
+    expect(component.isCountInvalid).toBe(false);
+  });
+
+  it('should close without data on cancel', () => {
+    createWithData({ sentenceQueueCount: 20, withSelection: false });
+
     component.onNoClick();
+
     expect(mockDialogRef.close).toHaveBeenCalledWith();
   });
 
-  it('should close dialog with data on confirm', () => {
+  it('should close with the options on confirm', () => {
+    createWithData({ sentenceQueueCount: 20, withSelection: false });
     component.countOfItems.set(15);
-    component.allowEmptyAnswer.set(true);
-    component.direction.set(TranslateDirectionEnum.ChineseToEnglish);
 
     component.onYesClick();
 
-    expect(mockDialogRef.close).toHaveBeenCalledWith({
-      allowEmptyAnswer: true,
-      countOfItems: 15,
-      direction: TranslateDirectionEnum.ChineseToEnglish,
+    expect(mockDialogRef.close).toHaveBeenCalledWith({ countOfItems: 15 });
+  });
+
+  it('should return the persisted count when a selection is active', () => {
+    createWithData({
+      sentenceQueueCount: 9,
+      withSelection: true,
+      currentSettings: { countOfItems: 7 },
     });
+
+    component.onYesClick();
+
+    expect(mockDialogRef.close).toHaveBeenCalledWith({ countOfItems: 7 });
   });
 });
 
@@ -914,10 +1406,7 @@ describe('TranslateExercisesPrintOptionsDialogComponent', () => {
       _loadDependencies: vi.fn().mockReturnValue(of(null)),
       translate: vi.fn((key: string) => key),
       activeLang: 'en',
-      config: {
-        reRenderOnLangChange: true,
-        prodMode: false,
-      },
+      config: { reRenderOnLangChange: true, prodMode: false },
       langChanges$: of('en'),
       events$: of(),
     };
@@ -931,12 +1420,6 @@ describe('TranslateExercisesPrintOptionsDialogComponent', () => {
           useValue: {
             reciteQueuesCount: 30,
             withSelection: false,
-            allDirections: [
-              { value: TranslateDirectionEnum.ChineseToEnglish },
-              { value: TranslateDirectionEnum.EnglishToChinese },
-            ],
-            getDirectionName: (dir: TranslateDirectionEnum) =>
-              dir === TranslateDirectionEnum.ChineseToEnglish ? '中译英' : '英译中',
           },
         },
         { provide: TranslocoService, useValue: mockTranslocoService },
@@ -1003,6 +1486,59 @@ describe('TranslateExercisesPrintOptionsDialogComponent', () => {
   });
 });
 
+describe('TranslateExercisesInfoDialogComponent', () => {
+  let component: TranslateExercisesInfoDialogComponent;
+  let fixture: ComponentFixture<TranslateExercisesInfoDialogComponent>;
+  let mockDialogRef: any;
+
+  beforeEach(async () => {
+    mockDialogRef = { close: vi.fn() };
+
+    const mockTranslocoService = {
+      setActiveLang: vi.fn(),
+      getActiveLang: vi.fn(),
+      selectTranslate: vi.fn().mockReturnValue(of('')),
+      _loadDependencies: vi.fn().mockReturnValue(of(null)),
+      translate: vi.fn((key: string) => key),
+      activeLang: 'en',
+      config: { reRenderOnLangChange: true, prodMode: false },
+      langChanges$: of('en'),
+      events$: of(),
+    };
+
+    await TestBed.configureTestingModule({
+      imports: [TranslateExercisesInfoDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MatDialogRef, useValue: mockDialogRef },
+        {
+          provide: MAT_DIALOG_DATA,
+          useValue: {
+            titleKey: 'common.explanation',
+            content: 'Some explanation',
+          },
+        },
+        { provide: TranslocoService, useValue: mockTranslocoService },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
+      ],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(TranslateExercisesInfoDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should close on close click', () => {
+    component.onCloseClick();
+    expect(mockDialogRef.close).toHaveBeenCalledWith();
+  });
+});
+
 describe('TranslateExercisesLLMDialogComponent', () => {
   let component: TranslateExercisesLLMDialogComponent;
   let fixture: ComponentFixture<TranslateExercisesLLMDialogComponent>;
@@ -1137,78 +1673,3 @@ describe('TranslateExercisesLLMDialogComponent', () => {
     expect(component.getAIModeName(TranslationAIModeEnum.Correct)).toBe('纠正');
   });
 });
-
-describe('TranslateSelectByRatingDialogComponent', () => {
-  let component: TranslateSelectByRatingDialogComponent;
-  let fixture: ComponentFixture<TranslateSelectByRatingDialogComponent>;
-  let mockDialogRef: any;
-
-  beforeEach(async () => {
-    mockDialogRef = { close: vi.fn() };
-
-    const mockTranslocoService = {
-      setActiveLang: vi.fn(),
-      getActiveLang: vi.fn(),
-      selectTranslate: vi.fn().mockReturnValue(of('')),
-      _loadDependencies: vi.fn().mockReturnValue(of(null)),
-      translate: vi.fn((key: string) => key),
-      activeLang: 'en',
-      config: {
-        reRenderOnLangChange: true,
-        prodMode: false,
-      },
-      langChanges$: of('en'),
-      events$: of(),
-    };
-
-    await TestBed.configureTestingModule({
-      imports: [TranslateSelectByRatingDialogComponent, NoopAnimationsModule],
-      providers: [
-        { provide: MatDialogRef, useValue: mockDialogRef },
-        { provide: TranslocoService, useValue: mockTranslocoService },
-        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
-        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
-        { provide: TRANSLOCO_INTERCEPTOR, useValue: {} },
-      ],
-    }).compileComponents();
-
-    fixture = TestBed.createComponent(TranslateSelectByRatingDialogComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-
-  it('should initialize with default operator and value', () => {
-    expect(component.ratingOperator()).toBe(RatingOperatorEnum.Equals);
-    expect(component.ratingValue()).toBe(3);
-  });
-
-  it('should close dialog without data on cancel', () => {
-    component.onNoClick();
-    expect(mockDialogRef.close).toHaveBeenCalledWith();
-  });
-
-  it('should close with ratingOperator and ratingValue on confirm', () => {
-    component.ratingOperator.set(RatingOperatorEnum.GreaterThan);
-    component.ratingValue.set(3);
-    component.onYesClick();
-
-    expect(mockDialogRef.close).toHaveBeenCalledWith({
-      ratingOperator: RatingOperatorEnum.GreaterThan,
-      ratingValue: 3,
-    });
-  });
-
-  it('ratingOperators should include all five value-based operators', () => {
-    const values = component.ratingOperators.map(op => op.value);
-    expect(values).toContain(RatingOperatorEnum.Equals);
-    expect(values).toContain(RatingOperatorEnum.GreaterThan);
-    expect(values).toContain(RatingOperatorEnum.LargerOrEquals);
-    expect(values).toContain(RatingOperatorEnum.LessThan);
-    expect(values).toContain(RatingOperatorEnum.LessOrEquals);
-    expect(component.ratingOperators.length).toBe(5);
-  });
-});
diff --git a/src/app/pages/translate-exercises/translate-exercises.component.ts b/src/app/pages/translate-exercises/translate-exercises.component.ts
index f8593c1..eaca0de 100644
--- a/src/app/pages/translate-exercises/translate-exercises.component.ts
+++ b/src/app/pages/translate-exercises/translate-exercises.component.ts
@@ -1,183 +1,150 @@
 import { SelectionModel } from '@angular/cdk/collections';
 import type { OnInit } from '@angular/core';
 import {
-  Component,
   ChangeDetectionStrategy,
-  ChangeDetectorRef,
+  Component,
   DestroyRef,
+  effect,
   inject,
-  Inject,
-  model,
-  ViewChild,
+  signal,
 } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import { MatButtonToggleModule } from '@angular/material/button-toggle';
 import type { MatButtonToggleChange } from '@angular/material/button-toggle';
-import { MatCheckboxModule } from '@angular/material/checkbox';
-import { MAT_DATE_FORMATS, MAT_DATE_LOCALE } from '@angular/material/core';
-import { MatDatepickerModule } from '@angular/material/datepicker';
-import {
-  MAT_DIALOG_DATA,
-  MatDialog,
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
-import { MatDividerModule } from '@angular/material/divider';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatPaginator, MatPaginatorModule } from '@angular/material/paginator';
-import { MatProgressBarModule } from '@angular/material/progress-bar';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { MatRadioModule } from '@angular/material/radio';
+import { MatDialog } from '@angular/material/dialog';
 import type { MatSelectChange } from '@angular/material/select';
-import { MatSelectModule } from '@angular/material/select';
-import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
-import { MatSort, MatSortModule } from '@angular/material/sort';
-import { MatTableDataSource, MatTableModule } from '@angular/material/table';
-import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatTooltipModule } from '@angular/material/tooltip';
-import { MatDateFnsModule, provideDateFnsAdapter } from '@angular/material-date-fns-adapter';
+import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
-import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
-import { zhCN } from 'date-fns/locale';
+import { FisherYatesShuffle, type IFilterDefinition } from 'actslib';
 
 import type {
-  TranslateExerciseUIStatus,
-  TranslateQueue,
-  TranslateExercisePrintOption,
-  LearningContent,
-  LearnEnglishSentFileItem,
-  TranslateExerciseOption,
   KnowledgeExerciseFileContent,
   KnowledgeExercisePrintOption,
+  LearnEnglishSentFileItem,
+  LearningContent,
+  SentenceListFilter,
+  SentenceQuizOption,
+  SentenceReviewOption,
+  SentenceReviewQueueItem,
+  TranslateExerciseOption,
+  TranslateExercisePrintOption,
+  TranslateQueue,
+  VocabularySelectOption,
 } from '../../interfaces';
 import {
-  TranslateExerciseStatusEnum,
-  TranslateDirectionEnum,
-  TranslationAIModeEnum,
-  MY_DATE_FORMATS,
-  getAllPrintExecDateString,
   QuestionBankTypeEnum,
-  RatingOperatorEnum,
-  matchRating,
+  SENTENCE_FILTER_PROPERTIES,
+  SelectionModeEnum,
+  TranslateDirectionEnum,
+  buildSentenceQuizQuestions,
+  emptySentenceFilterDefinition,
+  isSentenceListFilterEmpty,
+  matchSentenceListFilter,
 } from '../../interfaces';
 import {
+  AIService,
+  AudioService,
   LearningContentService,
   LearningRatingService,
-  UtilService,
-  AudioService,
-  AIService,
-  UserCodeService,
   UIService,
   ratingItemKey,
 } from '../../services';
+import type {
+  FilterDialogData,
+  FilterDialogResult,
+} from '../../shared/filter-dialog/filter-dialog-model';
+import { SharedFilterDialogComponent } from '../../shared/filter-dialog/filter-dialog.component';
 import { FooterComponent } from '../../shared/footer/footer';
-import { MarkdownContentComponent } from '../../shared/markdown-content';
-import { fisherYatesShuffle } from '../../shared/utils/shuffle';
 import { AppPageTitle } from '../page-title/page-title';
 
+import { TranslateExercisesInfoDialogComponent } from './translate-exercises-info-dialog.component';
+import { TranslateExercisesLLMDialogComponent } from './translate-exercises-llm-dialog.component';
+import { TranslateExercisesOptionsDialogComponent } from './translate-exercises-options-dialog.component';
+import { TranslateExercisesPrintOptionsDialogComponent } from './translate-exercises-printoptions-dialog.component';
+import { TranslateExercisesQuizResultComponent } from './translate-exercises-quiz-result.component';
+import { TranslateExercisesQuizSessionComponent } from './translate-exercises-quiz-session.component';
+import { TranslateQuizSessionStore } from './translate-exercises-quiz-session.store';
+import { TranslateExercisesQuizOptionsDialogComponent } from './translate-exercises-quizoptions-dialog.component';
+import { TranslateExercisesReviewSessionComponent } from './translate-exercises-review-session.component';
+import { TranslateReviewSessionStore } from './translate-exercises-review-session.store';
+import { TranslateExercisesReviewOptionsDialogComponent } from './translate-exercises-reviewoptions-dialog.component';
+import { TranslateExercisesSelectDialogComponent } from './translate-exercises-select-dialog.component';
+import { TranslateExercisesSentenceListComponent } from './translate-exercises-sentence-list.component';
+import { TranslateExercisesTypingResultComponent } from './translate-exercises-typing-result.component';
+import { TranslateExercisesTypingSessionComponent } from './translate-exercises-typing-session.component';
+import { TranslateTypingSessionStore } from './translate-exercises-typing-session.store';
+
+/** The screens of the sentence (translation) exercises page, switched via @switch in the template. */
+export type TranslateExercisesMode = 'list' | 'review' | 'typing' | 'typingresult' | 'quiz' | 'quizresult';
+
 @Component({
   selector: 'app-translate-exercises',
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     FooterComponent,
-    MatToolbarModule,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    FormsModule,
-    MatTableModule,
-    MatFormFieldModule,
-    MatPaginatorModule,
-    MatIconModule,
-    MatButtonModule,
-    MatTableModule,
-    MatCheckboxModule,
-    MatDividerModule,
-    MatProgressBarModule,
-    MatProgressSpinnerModule,
-    MatSnackBarModule,
-    MatSortModule,
-    MatButtonToggleModule,
-    MatMenuModule,
-    MatTooltipModule,
-    TranslocoModule,
+    TranslateExercisesSentenceListComponent,
+    TranslateExercisesReviewSessionComponent,
+    TranslateExercisesTypingSessionComponent,
+    TranslateExercisesTypingResultComponent,
+    TranslateExercisesQuizSessionComponent,
+    TranslateExercisesQuizResultComponent,
   ],
   templateUrl: './translate-exercises.component.html',
   styleUrl: './translate-exercises.component.scss',
+  // Session state is shared between the session and result screens.
+  providers: [
+    TranslateReviewSessionStore,
+    TranslateTypingSessionStore,
+    TranslateQuizSessionStore,
+  ],
   host: {
     class: 'app-main-content',
   },
 })
 export class TranslateExercisesComponent implements OnInit {
-  allFiles: LearningContent[] = [];
-  selectedFile?: LearningContent;
-  isLoadingContents = true;
-  currentStatus: TranslateExerciseUIStatus = {
-    status: TranslateExerciseStatusEnum.NotStarted,
-    //direction: TranslateDirectionEnum.EnglishToChinese,
-    correctCount: 0,
-    incorrectCount: 0,
-    totalCount: 0,
-    startTime: new Date(),
-    endTime: new Date(),
-  };
-  recitequeues: TranslateQueue[] = [];
-  queueidx: number = -1; // Current Queue
-  allDirections = [
-    { value: TranslateDirectionEnum.ChineseToEnglish },
-    { value: TranslateDirectionEnum.EnglishToChinese },
-  ];
+  allFiles = signal<LearningContent[]>([]);
+  selectedFile = signal<LearningContent | undefined>(undefined);
+  isLoadingContents = signal(true);
+  // Current screen. The template switches on it via @switch; session screens
+  // are added by the review/typing/quiz phases.
+  mode = signal<TranslateExercisesMode>('list');
+  // Table for content (rendered by the sentence-list child component, which
+  // also wires the paginator/sort it owns onto this shared data source).
+  dataSource: MatTableDataSource<LearnEnglishSentFileItem> = new MatTableDataSource();
+  selection = new SelectionModel<LearnEnglishSentFileItem>(true, []);
+  // Ratings of the loaded file's items. Replaced (not mutated) on every update
+  // so the new reference reaches the OnPush sentence-list child as an input.
+  contentRatingMap = signal(new Map<number, number>());
+  // Filter bar: the container is the single source of truth for the applied
+  // condition definition (it opens the shared filter dialog). freeText is fed
+  // back from the child's live input via freeTextChanged.
+  freeText = signal('');
+  filterDefinition = signal<IFilterDefinition>(emptySentenceFilterDefinition());
+  // Parsed form of the active list filter; applyListFilter keeps it in sync
+  // with dataSource.filter so the row predicate does not JSON.parse per row.
+  // Null means no filter (MatTable skips the predicate for an empty filter).
+  private listFilterCriteria: SentenceListFilter | null = null;
   // Title
   pageTitle: AppPageTitle = inject(AppPageTitle);
-
-  // dataSourcePreview: LearnEnglishSentFileItem[] = [];
-  displayedPreviewColumns = [
-    'select',
-    'id',
-    'ensent',
-    'ai',
-    'enwords',
-    'cnsent',
-    'explaination',
-    'extraInfo',
-    'rating',
-  ];
-  private contentRatingMap = new Map<number, number>();
-  studyContentId = 0;
-  // Result part
-  dataSourceResult: any[] = [];
-  displayedResultColumns = ['ensent', 'cnsent', 'enwords', 'inputted'];
-  paginator!: MatPaginator;
-  @ViewChild(MatPaginator, { static: false })
-  set content(content: MatPaginator) {
-    if (content) {
-      // initially setter gets called with undefined
-      this.paginator = content;
-      this.dataSource.paginator = this.paginator;
-    }
-  }
-  dataSource: MatTableDataSource<LearnEnglishSentFileItem> = new MatTableDataSource();
-  @ViewChild(MatSort) sort?: MatSort;
+  // Service
+  private readonly contentService = inject(LearningContentService);
   readonly dialog = inject(MatDialog);
+  private readonly ratingService = inject(LearningRatingService);
+  private readonly destroyRef = inject(DestroyRef);
   readonly audio = inject(AudioService);
-  readonly aiutil = inject(AIService);
-  readonly usercode = inject(UserCodeService);
-  readonly snackBar = inject(MatSnackBar);
-  readonly util = inject(UtilService);
+  private readonly aiutil = inject(AIService);
   readonly uiService = inject(UIService);
+  // Navigation
   readonly router = inject(Router);
-  setting: TranslateExerciseOption = {
-    countOfItems: 20,
-    direction: TranslateDirectionEnum.EnglishToChinese,
-    allowEmptyAnswer: false,
-  };
+  // Maps selected file index to backend ContentId
+  studyContentId = 0;
+  // Latest rating the user requested per item in the list view; upsert
+  // responses that arrive out of order are dropped against this map.
+  private pendingContentRatings = new Map<number, number>();
+  // Monotonic token of the current file load. Rapid file switches are
+  // last-click-wins: a slow response from a previous file must not overwrite
+  // the newly selected file's data/ratings (both loads compare against it).
+  private fileLoadToken = 0;
+  // Print options.
   printSetting: TranslateExercisePrintOption = {
     printAnswer: false,
     printWord: false,
@@ -185,66 +152,77 @@ export class TranslateExercisesComponent implements OnInit {
     direction: TranslateDirectionEnum.EnglishToChinese,
     countOfItems: 20,
   };
-  selection = new SelectionModel<LearnEnglishSentFileItem>(true, []);
-
-  /** Whether the number of selected elements matches the total number of rows. */
+  // Typing options (session state itself lives in typingStore).
+  typingSetting: TranslateExerciseOption = {
+    countOfItems: 20,
+    direction: TranslateDirectionEnum.EnglishToChinese,
+  };
+  // Typing session state/behavior; provided on this component so the typing
+  // and result screens share one instance.
+  readonly typingStore = inject(TranslateTypingSessionStore);
+  // Review options (session state itself lives in reviewStore).
+  reviewSetting: SentenceReviewOption = {
+    countOfItems: 20,
+    disableVoice: false,
+  };
+  // Review session state/behavior; provided on this component so the review
+  // screen and the container share one instance.
+  readonly reviewStore = inject(TranslateReviewSessionStore);
+  // Quiz options (session state itself lives in quizStore).
+  quizSetting: SentenceQuizOption = {
+    countOfItems: 20,
+  };
+  // Quiz session state/behavior; provided on this component so the quiz and
+  // result screens share one instance.
+  readonly quizStore = inject(TranslateQuizSessionStore);
+
+  /** Rows the table currently shows: the filtered count when a filter is active. */
+  get visibleRowCount(): number {
+    return this.dataSource.filter
+      ? this.dataSource.filteredData.length
+      : this.dataSource.data.length;
+  }
+
+  /**
+   * Whether every visible row is selected. Comparing against the visible rows
+   * (not just counts) keeps the header checkbox honest when the selection also
+   * contains rows the current filter hides.
+   */
   isAllSelected() {
-    const numSelected = this.selection.selected.length;
-    const numRows = this.dataSource.data.length;
-    return numSelected === numRows;
+    const visible = this.getVisibleData();
+    return visible.length > 0 && visible.every(row => this.selection.isSelected(row));
   }
 
-  /** Selects all rows if they are not all selected; otherwise clear selection. */
+  /**
+   * Selects all visible rows if they are not all selected; otherwise clear
+   * selection. Scoped to the filtered rows so the table filter keeps
+   * describing what the exercises will use (see getVisibleData).
+   * Replaces any previous selection: it may still contain rows the current
+   * filter hides, and hidden rows would otherwise leak into the exercises.
+   */
   toggleAllRows() {
     if (this.isAllSelected()) {
       this.selection.clear();
       return;
     }
 
-    this.selection.select(...this.dataSource.data);
-  }
-
-  get isTranslateNotStarted(): boolean {
-    return this.currentStatus.status === TranslateExerciseStatusEnum.NotStarted;
-  }
-  get isTranslateInProgress(): boolean {
-    return this.currentStatus.status === TranslateExerciseStatusEnum.InProgress;
-  }
-  get isTranslateCompleted(): boolean {
-    return this.currentStatus.status === TranslateExerciseStatusEnum.Completed;
-  }
-  get reciteQueuesCount(): number {
-    return this.dataSource.data.length;
-  }
-  get currentQueueItem(): TranslateQueue | undefined {
-    return this.recitequeues[this.queueidx] ?? undefined;
-  }
-  get currentProgress(): number {
-    return this.reciteQueuesCount === 0 ? 100 : (this.queueidx * 100) / this.reciteQueuesCount;
-  }
-  private readonly contentService = inject(LearningContentService);
-  private readonly ratingService = inject(LearningRatingService);
-  readonly transloco = inject(TranslocoService);
-  private readonly destroyRef = inject(DestroyRef);
-  private readonly cdr = inject(ChangeDetectorRef);
-
-  get isEnglishToChineseDirection(): boolean {
-    return this.setting.direction === TranslateDirectionEnum.EnglishToChinese;
-  }
-  get isChineseToEnglishDirection(): boolean {
-    return this.setting.direction === TranslateDirectionEnum.ChineseToEnglish;
-  }
-
-  getDirectionName(dir: TranslateDirectionEnum): string {
-    switch (dir) {
-      case TranslateDirectionEnum.ChineseToEnglish:
-        return this.transloco.translate('translateExercises.chineseToEnglish');
-      default:
-        return this.transloco.translate('translateExercises.englishToChinese');
-    }
+    this.selection.setSelection(...this.getVisibleData());
   }
 
   constructor() {
+    // The stores cannot switch screens; when the last sentence is submitted
+    // or the last question answered, move to the result screen here.
+    effect(() => {
+      if (this.typingStore.isComplete() && this.mode() === 'typing') {
+        this.mode.set('typingresult');
+      }
+    });
+    effect(() => {
+      if (this.quizStore.isComplete() && this.mode() === 'quiz') {
+        this.mode.set('quizresult');
+      }
+    });
+
     this.dataSource.sortingDataAccessor = (
       data: LearnEnglishSentFileItem,
       sortHeaderId: string
@@ -264,6 +242,14 @@ export class TranslateExercisesComponent implements OnInit {
       }
       return '';
     };
+    // Filter bar criteria travel through MatTableDataSource's single string
+    // channel as JSON; applyListFilter parses it once into listFilterCriteria
+    // (the rating lives in contentRatingMap, so the predicate closes over
+    // `this` to reach both via getRating).
+    this.dataSource.filterPredicate = (
+      data: LearnEnglishSentFileItem
+    ): boolean =>
+      matchSentenceListFilter(data, this.getRating(data.id), this.listFilterCriteria!);
   }
 
   ngOnInit(): void {
@@ -274,132 +260,251 @@ export class TranslateExercisesComponent implements OnInit {
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: contents => {
-          this.allFiles = contents;
-          this.isLoadingContents = false;
-          // OnPush: the file list arrives in an async subscribe callback, so the
-          // view is not marked dirty automatically — without this the files
-          // dropdown stays empty until a later DOM event triggers detection.
-          this.cdr.markForCheck();
+          this.allFiles.set(contents);
+          this.isLoadingContents.set(false);
         },
         error: err => {
           console.error(err);
-          this.isLoadingContents = false;
-          this.cdr.markForCheck();
+          this.isLoadingContents.set(false);
         },
       });
   }
 
-  private coverContentToQueue(content: LearnEnglishSentFileItem[]): TranslateQueue[] {
-    const queues: TranslateQueue[] = [];
-    content.forEach(item => {
-      queues.push({
-        ensent: item.ensent,
-        cnsent: item.cnsent,
-        enwords: item.enwords,
-        completed: false,
-        inputted: '',
+  applyListFilter(criteria: SentenceListFilter) {
+    // Parsed once here; the row predicate reads this field instead of
+    // JSON.parse-ing the filter string for every row.
+    this.listFilterCriteria = isSentenceListFilterEmpty(criteria) ? null : criteria;
+    // An empty filter string keeps the "no filter" contract the rest of the
+    // page relies on (visibleRowCount, getVisibleData).
+    this.dataSource.filter = this.listFilterCriteria === null
+      ? ''
+      : JSON.stringify(criteria);
+  }
+
+  onFreeTextChanged(text: string): void {
+    this.freeText.set(text);
+    this.applyCurrentFilter();
+  }
+
+  onDefineFilter(): void {
+    this.dialog
+      .open<SharedFilterDialogComponent, FilterDialogData, FilterDialogResult | undefined>(
+        SharedFilterDialogComponent,
+        {
+          data: {
+            properties: SENTENCE_FILTER_PROPERTIES,
+            root: this.filterDefinition(),
+          },
+          // Tree navigator + detail pane sit side by side; the splitter can
+          // resize them but needs the extra width to start from.
+          width: '880px',
+          enterAnimationDuration: 800,
+          exitAnimationDuration: 500,
+        }
+      )
+      .afterClosed()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(result => {
+        // undefined (Cancel / backdrop / Esc) leaves the previous filter untouched.
+        if (result !== undefined) {
+          this.filterDefinition.set(result.root);
+          this.applyCurrentFilter();
+        }
       });
+  }
+
+  onClearFilter(): void {
+    this.filterDefinition.set(emptySentenceFilterDefinition());
+    this.applyCurrentFilter();
+  }
+
+  /**
+   * Clear the table selection from the Selection menu. Mirrors the
+   * selection.clear() calls used on file switch / toggle-all: drops every
+   * selected row so the exercises no longer act on a stale selection.
+   */
+  onClearSelection(): void {
+    this.selection.clear();
+  }
+
+  /**
+   * Select every row the table currently shows (Selection ▾ > Select All
+   * Visible). Replaces any previous selection so hidden rows never leak into
+   * the exercises.
+   */
+  onSelectAllVisible(): void {
+    this.selection.setSelection(...this.getVisibleData());
+  }
+
+  /**
+   * Quick selection from the filter bar. Random reuses Free Selection (count
+   * on a shuffled source), Sequence reuses By Count (count + offset on the
+   * sorted source); both open the shared select dialog.
+   */
+  onQuickSelect(mode: 'random' | 'sequence'): void {
+    this.onSelect(mode === 'random' ? SelectionModeEnum.FreeSelection : SelectionModeEnum.ByCount);
+  }
+
+  private applyCurrentFilter(): void {
+    this.applyListFilter({
+      freeText: this.freeText(),
+      root: this.filterDefinition(),
     });
-    return queues;
   }
 
-  private formatEnwords(enwords?: string[]): string {
-    if (!enwords || enwords.length === 0) {
-      return '';
+  getRating(itemId: string | undefined): number {
+    const numId = ratingItemKey(itemId);
+    return numId === undefined ? 0 : (this.contentRatingMap().get(numId) ?? 0);
+  }
+
+  onContentRatingChanged(item: LearnEnglishSentFileItem, event: MatButtonToggleChange) {
+    if (event.value === undefined || event.value === null || event.value < 1) {
+      // Clicking the active toggle deselects it (value becomes undefined).
+      // There is no "clear rating" operation, so restore the previous selection.
+      event.source.buttonToggleGroup.value = event.source.value;
+      return;
+    }
+    if (this.studyContentId <= 0 || item.id === undefined) {
+      return;
+    }
+    const numId = ratingItemKey(item.id);
+    if (numId === undefined) {
+      return;
     }
-    return enwords.join(', ');
+
+    this.pendingContentRatings.set(numId, event.value);
+    this.ratingService
+      .upsertRating(this.studyContentId, numId, event.value)
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe({
+        next: (saved) => {
+          // Drop stale responses: a newer click on the same item is already
+          // in flight and its response will set the final value.
+          if (this.pendingContentRatings.get(numId) !== event.value) {
+            return;
+          }
+          this.contentRatingMap.update(m => new Map(m).set(numId, saved.rating));
+          // The filter predicate closes over contentRatingMap, and a rating
+          // change does not change the filter string — reassign it to force a
+          // re-run while a filter is active, or the table shows stale rows.
+          if (this.dataSource.filter) {
+            this.dataSource.filter = this.dataSource.filter;
+          }
+        },
+        error: err => {
+          console.error('Failed to save rating', err);
+          // A newer click on the same item is in flight; its outcome decides
+          // the final value — reverting now would clobber it.
+          if (this.pendingContentRatings.get(numId) !== event.value) {
+            return;
+          }
+          this.pendingContentRatings.delete(numId);
+          // Revert the toggle to the last confirmed value so the view does
+          // not show a rating the server never saved. The [ngModel] binding
+          // value is unchanged (no writeValue runs), so the group must be
+          // reset directly, like the deselect path above.
+          event.source.buttonToggleGroup.value = this.getRating(item.id);
+        },
+      });
   }
+
   onFileSelectionChanged(event: MatSelectChange) {
-    // Drop selection carried over from the previously loaded file.
+    // Drop any selection carried over from the previously loaded file — the
+    // SelectionModel holds references to the old file's row objects, which are
+    // no longer relevant and would otherwise keep the exercise buttons
+    // acting on stale rows.
     this.selection.clear();
+    this.pendingContentRatings.clear();
 
     if (!event.value) {
+      this.fileLoadToken++;
       this.dataSource.data = [];
       this.studyContentId = 0;
-      this.contentRatingMap.clear();
+      this.contentRatingMap.set(new Map());
       return;
     }
 
     const selectedContent = event.value as LearningContent;
     this.studyContentId = selectedContent.id;
+    const token = ++this.fileLoadToken;
+    // Clear the rating map BEFORE subscribing to content: cached content
+    // resolves synchronously, so the content `next` (which re-runs the
+    // filter predicate) would otherwise filter the new file's rows against
+    // the previous file's ratings.
+    this.contentRatingMap.set(new Map());
 
     this.contentService
       .getSentenceFileContent(selectedContent.fileUrl)
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe({
         next: (df?: LearnEnglishSentFileItem[]) => {
-          this.recitequeues = [];
+          // A newer selection superseded this load.
+          if (token !== this.fileLoadToken) {
+            return;
+          }
           if (df) {
             this.dataSource.data = df.slice();
-            this.dataSource.paginator = this.paginator;
-            this.dataSource.sort = this.sort!;
           }
         },
         error: err => {
           console.error(err);
+          // A newer selection superseded this load; its error is stale.
+          if (token !== this.fileLoadToken) {
+            return;
+          }
+          // The new file failed to load: drop the previous file's rows so they
+          // are not shown (and rated) under the new file's studyContentId,
+          // which would persist ratings into the wrong file. Bump the token so
+          // the in-flight ratings load for this file is discarded too.
+          this.fileLoadToken++;
+          this.dataSource.data = [];
+          this.studyContentId = 0;
+          this.contentRatingMap.set(new Map());
+          this.pendingContentRatings.clear();
         },
       });
 
     // Fetch ratings for this content from the API
-    this.contentRatingMap.clear();
     if (this.studyContentId > 0) {
       this.ratingService
         .getRatings(this.studyContentId)
         .pipe(takeUntilDestroyed(this.destroyRef))
         .subscribe({
-          next: ratings => {
+          next: (ratings) => {
+            if (token !== this.fileLoadToken) {
+              return;
+            }
+            const newRatingMap = new Map<number, number>();
             for (const r of ratings) {
               if (r.itemId !== undefined) {
-                this.contentRatingMap.set(r.itemId, r.rating);
+                newRatingMap.set(r.itemId, r.rating);
               }
             }
-            // OnPush: ratings arrive async; the mat-table only re-renders rows
-            // when dataSource emits, so without markForCheck the rating column
-            // stays at 0 until the next interaction.
-            this.cdr.markForCheck();
+            this.contentRatingMap.set(newRatingMap);
+            // The predicate closes over contentRatingMap, and the data was
+            // (re)filtered while the map was still empty — force a re-run now
+            // that real ratings are in, or a persisted rating filter shows
+            // stale rows (same trick as onContentRatingChanged).
+            if (this.dataSource.filter) {
+              this.dataSource.filter = this.dataSource.filter;
+            }
+          },
+          error: err => {
+            console.error('Failed to load ratings', err);
+            // Re-evaluate the rows against the (empty) rating map instead of
+            // leaving them filtered by the previous file's ratings until the
+            // next change — mirrors the success path.
+            if (token !== this.fileLoadToken) {
+              return;
+            }
+            if (this.dataSource.filter) {
+              this.dataSource.filter = this.dataSource.filter;
+            }
           },
-          error: err => console.error('Failed to load ratings', err),
         });
     }
   }
 
-  getRating(itemId: string | undefined): number {
-    const numId = ratingItemKey(itemId);
-    return numId === undefined ? 0 : (this.contentRatingMap.get(numId) ?? 0);
-  }
-
-  onContentRatingChanged(item: LearnEnglishSentFileItem, event: MatButtonToggleChange) {
-    if (event.value === undefined || event.value === null || event.value < 1) {
-      // Clicking the active toggle deselects it (value becomes undefined).
-      // There is no "clear rating" operation, so restore the previous selection.
-      event.source.buttonToggleGroup.value = event.source.value;
-      return;
-    }
-    if (this.studyContentId <= 0 || item.id === undefined) {
-      return;
-    }
-    const numId = ratingItemKey(item.id);
-    if (numId === undefined) {
-      return;
-    }
-
-    this.ratingService
-      .upsertRating(this.studyContentId, numId, event.value)
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe({
-        next: saved => {
-          this.contentRatingMap.set(numId, saved.rating);
-          this.cdr.markForCheck();
-        },
-        error: err => console.error('Failed to save rating', err),
-      });
-  }
-
-  applyFilter(event: Event) {
-    const filterValue = (event.target as HTMLInputElement).value;
-    this.dataSource.filter = filterValue.trim().toLowerCase();
-  }
-
   onPlayTTS(sent: string) {
     this.aiutil
       .getTTS(sent)
@@ -413,6 +518,7 @@ export class TranslateExercisesComponent implements OnInit {
         },
       });
   }
+
   onLLMExplain(sent: string) {
     this.dialog.open(TranslateExercisesLLMDialogComponent, {
       data: {
@@ -428,7 +534,7 @@ export class TranslateExercisesComponent implements OnInit {
   onShowExplanation(explanation?: string) {
     this.dialog.open(TranslateExercisesInfoDialogComponent, {
       data: {
-        title: 'Explanation',
+        titleKey: 'common.explanation',
         content: explanation || '',
       },
       width: '600px',
@@ -441,7 +547,7 @@ export class TranslateExercisesComponent implements OnInit {
   onShowExtraInfo(extraInfo?: string[]) {
     this.dialog.open(TranslateExercisesInfoDialogComponent, {
       data: {
-        title: 'Extra Info',
+        titleKey: 'common.extraInfo',
         content: extraInfo ? extraInfo.join('\n\n') : '',
       },
       width: '800px',
@@ -451,41 +557,17 @@ export class TranslateExercisesComponent implements OnInit {
     });
   }
 
-  onStart() {
-    const numSelected = this.selection.selected.length > 0 ? this.selection.selected.length : 0;
-    if (numSelected > 0) {
-      this.recitequeues = this.coverContentToQueue(this.selection.selected);
-    } else {
-      this.recitequeues = this.coverContentToQueue(this.dataSource.data);
-      if (this.recitequeues.length > this.setting.countOfItems) {
-        // Randomize the array `this.wordqueues`
-        this.recitequeues = fisherYatesShuffle(this.recitequeues);
-        // Keep only the first `this.countOfItems` items
-        this.recitequeues = this.recitequeues.slice(0, this.setting.countOfItems);
-      }
-    }
-
-    this.queueidx = 0;
-    this.currentStatus.status = TranslateExerciseStatusEnum.InProgress;
-    this.currentStatus.startTime = new Date();
-    this.currentStatus.totalCount = this.recitequeues.length;
-
-    this.dataSourceResult = [];
-  }
-
-  onStartWithOptions() {
-    const dialogRef = this.dialog.open(TranslateExercisesOptionsDialogComponent, {
+  onPrintWithOptions() {
+    const dialogRef = this.dialog.open(TranslateExercisesPrintOptionsDialogComponent, {
       data: {
         reciteQueuesCount:
           this.selection.selected.length > 0
             ? this.selection.selected.length
-            : this.dataSource.data.length,
+            : this.visibleRowCount,
         withSelection: this.selection.selected.length > 0 ? true : false,
-        allDirections: this.allDirections,
-        getDirectionName: this.getDirectionName,
       },
-      width: '500px',
-      height: '360px',
+      width: '600px',
+      height: '420px',
       enterAnimationDuration: 800,
       exitAnimationDuration: 500,
     });
@@ -495,57 +577,53 @@ export class TranslateExercisesComponent implements OnInit {
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(result => {
         if (result !== undefined) {
-          this.setting.direction = result.direction;
-          this.setting.allowEmptyAnswer = result.allowEmptyAnswer;
-          this.setting.countOfItems = result.countOfItems;
-
-          this.onStart();
-          // OnPush: the exercise view switch (currentStatus.status = InProgress)
-          // happens in this async afterClosed callback — without markForCheck the
-          // view would not switch to the exercise screen until a later DOM event.
-          this.cdr.markForCheck();
+          this.printSetting.printAnswer = result.printAnswer;
+          this.printSetting.printWord = result.printWord;
+          this.printSetting.direction = result.direction;
+          this.printSetting.countOfItems = result.countOfItems;
+          this.printSetting.printEntryDate = result.printEntryDate;
+          this.printSetting.respectRetentionCurve = result.respectRetentionCurve;
+          this.printSetting.printExecDate = result.printExecDate;
+          if (this.printSetting.printExecDate) {
+            this.printSetting.execDate = result.execDate;
+          } else {
+            this.printSetting.execDate = undefined;
+          }
+
+          this.onPrint();
         }
       });
   }
 
+  /**
+   * Hand the visible (or selected) sentences to the shared print renderer:
+   * explicit table selection wins, otherwise the filtered rows run through
+   * prepareSentenceQueue so the filter bar keeps describing what prints.
+   */
   onPrint() {
-    // Check whether there are selections
-    const numSelected = this.selection.selected.length > 0 ? this.selection.selected.length : 0;
-    let prints = [];
-    if (numSelected > 0) {
-      prints = this.coverContentToQueue(this.selection.selected);
+    let source: LearnEnglishSentFileItem[];
+    if (this.selection.selected.length > 0) {
+      source = this.selection.selected.slice();
     } else {
-      this.recitequeues = this.coverContentToQueue(this.dataSource.data);
-      prints = this.recitequeues.slice();
-
-      if (prints.length > this.printSetting.countOfItems) {
-        // Randomize the array `this.wordqueues`
-        prints = fisherYatesShuffle(prints);
-        // Keep only the first `this.countOfItems` items
-        prints = prints.slice(0, this.printSetting.countOfItems);
-      }
+      source = this.prepareSentenceQueue(this.getVisibleData(), this.printSetting.countOfItems);
     }
 
-    const items: KnowledgeExerciseFileContent[] = [];
-    prints.forEach((queueitem, idx) => {
+    const items: KnowledgeExerciseFileContent[] = source.map((item, idx) => {
       const nidx = idx + 1;
-      const wordText = Array.isArray(queueitem.enwords)
-        ? queueitem.enwords.join(', ')
-        : queueitem.enwords || '';
-      items.push({
+      const wordText = item.enwords?.join(', ') ?? '';
+      const question =
+        this.printSetting.direction === TranslateDirectionEnum.EnglishToChinese
+          ? `${this.printSetting.printWord ? '(' + wordText + ')' : ''}${item.ensent} @${item.cnsent}@`
+          : `${this.printSetting.printWord ? '(' + wordText + ')' : ''}${item.cnsent} @${item.ensent}@`;
+      return {
         id: nidx.toString(),
         order: nidx,
         itemType: QuestionBankTypeEnum.FillInTheBlank,
-        question:
-          this.printSetting.direction === TranslateDirectionEnum.EnglishToChinese
-            ? `${this.printSetting.printWord ? '(' + wordText + ')' : ''}${queueitem.ensent} @${queueitem.cnsent}@`
-            : `${this.printSetting.printWord ? '(' + wordText + ')' : ''}${queueitem.cnsent} @${queueitem.ensent}@`,
-      });
+        question,
+      };
     });
     const execPrintSetting: KnowledgeExercisePrintOption = {
-      formTitle: this.selectedFile?.nameEnglish
-        ? this.selectedFile.nameEnglish
-        : 'Translate Exercises',
+      formTitle: this.selectedFile()?.nameEnglish ?? 'Translate Exercises',
       printEntryDate: true,
       printScore: true,
       printAnswer: this.printSetting.printAnswer,
@@ -557,19 +635,18 @@ export class TranslateExercisesComponent implements OnInit {
     void this.router.navigate(['/knowledge/displayv2']);
   }
 
-  onPrintWithOptions() {
-    const dialogRef = this.dialog.open(TranslateExercisesPrintOptionsDialogComponent, {
+  onTypingWithOptions() {
+    const dialogRef = this.dialog.open(TranslateExercisesOptionsDialogComponent, {
       data: {
         reciteQueuesCount:
           this.selection.selected.length > 0
             ? this.selection.selected.length
-            : this.reciteQueuesCount,
+            : this.visibleRowCount,
         withSelection: this.selection.selected.length > 0 ? true : false,
-        allDirections: this.allDirections,
-        getDirectionName: this.getDirectionName,
+        currentSettings: this.typingSetting,
       },
-      width: '600px',
-      height: '420px',
+      width: '500px',
+      height: '360px',
       enterAnimationDuration: 800,
       exitAnimationDuration: 500,
     });
@@ -579,28 +656,53 @@ export class TranslateExercisesComponent implements OnInit {
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(result => {
         if (result !== undefined) {
-          this.printSetting.printAnswer = result.printAnswer;
-          this.printSetting.printWord = result.printWord;
-          this.printSetting.direction = result.direction;
-          this.printSetting.countOfItems = result.countOfItems;
-          this.printSetting.printEntryDate = result.printEntryDate;
-          this.printSetting.respectRetentionCurve = result.respectRetentionCurve;
-          this.printSetting.printExecDate = result.printExecDate;
-          if (this.printSetting.printExecDate) {
-            this.printSetting.execDate = result.execDate;
-          } else {
-            this.printSetting.execDate = undefined;
-          }
+          this.typingSetting.direction = result.direction;
+          this.typingSetting.countOfItems = result.countOfItems;
 
-          this.onPrint();
+          this.onTypingStart();
         }
       });
   }
 
-  onSelectByRating() {
-    const dialogRef = this.dialog.open(TranslateSelectByRatingDialogComponent, {
-      data: {},
-      width: '400px',
+  /**
+   * Build the typing queue: explicit table selection wins, otherwise the
+   * filtered rows run through prepareSentenceQueue so the filter bar keeps
+   * describing what the session uses.
+   */
+  onTypingStart() {
+    let source: LearnEnglishSentFileItem[];
+    if (this.selection.selected.length > 0) {
+      source = this.selection.selected.slice();
+    } else {
+      source = this.prepareSentenceQueue(this.getVisibleData(), this.typingSetting.countOfItems);
+    }
+
+    // Nothing to type (e.g. a filter excluded every sentence): stay on the list.
+    if (this.typingStore.start(this.coverContentToQueue(source), this.typingSetting.direction)) {
+      this.mode.set('typing');
+    }
+  }
+
+  /**
+   * Leave the typing session (quit mid-session or back from the result
+   * screen): drop every piece of typing state, then return to the list.
+   */
+  onQuitTyping() {
+    this.typingStore.reset();
+    this.mode.set('list');
+  }
+
+  onReviewWithOptions() {
+    const dialogRef = this.dialog.open(TranslateExercisesReviewOptionsDialogComponent, {
+      data: {
+        sentenceQueueCount:
+          this.selection.selected.length > 0
+            ? this.selection.selected.length
+            : this.visibleRowCount,
+        withSelection: this.selection.selected.length > 0 ? true : false,
+        currentSettings: this.reviewSetting,
+      },
+      width: '500px',
       enterAnimationDuration: 800,
       exitAnimationDuration: 500,
     });
@@ -610,318 +712,257 @@ export class TranslateExercisesComponent implements OnInit {
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(result => {
         if (result !== undefined) {
-          this.selection.clear();
-          const operator = result.ratingOperator as RatingOperatorEnum;
-          const value = result.ratingValue as number;
-
-          this.dataSource.data.forEach(item => {
-            const rating = this.getRating(item.id);
-            const matches = matchRating(rating, operator, value);
+          this.reviewSetting.disableVoice = result.disableVoice;
+          this.reviewSetting.countOfItems = result.countOfItems;
 
-            if (matches) {
-              this.selection.select(item);
-            }
-          });
-          // OnPush: the rating-based selection is applied in the async
-          // afterClosed callback — without markForCheck the checkboxes would
-          // not reflect the new selection until a later DOM event.
-          this.cdr.markForCheck();
+          this.onReviewCore();
         }
       });
   }
 
-  onSubmitToNext() {
-    this.dataSourceResult.push({
-      ensent: this.recitequeues[this.queueidx].ensent,
-      cnsent: this.recitequeues[this.queueidx].cnsent,
-      enwords: this.recitequeues[this.queueidx].enwords,
-      inputted: this.recitequeues[this.queueidx].inputted,
-    });
-
-    this.setQueueIndex(this.queueidx + 1);
-  }
-
-  setQueueIndex(idx = 0) {
-    if (idx >= 0 && idx < this.recitequeues.length) {
-      if (this.queueidx !== -1) {
-        this.recitequeues[this.queueidx].completed = true;
-      }
+  // Review: queue prep stays here (it needs the table's selection/filter); the
+  // session itself lives in reviewStore.
+  onReviewCore() {
+    let sourceItems: LearnEnglishSentFileItem[] = [];
+    if (this.selection.selected.length > 0) {
+      // Randomize the array
+      sourceItems = FisherYatesShuffle(this.selection.selected.slice());
+    } else {
+      sourceItems = this.prepareSentenceQueue(
+        this.getVisibleData(),
+        this.reviewSetting.countOfItems
+      );
+    }
 
-      this.queueidx = idx;
-    } else if (idx === this.recitequeues.length) {
-      if (this.queueidx !== -1) {
-        this.recitequeues[this.queueidx].completed = true;
-      }
+    const queue: SentenceReviewQueueItem[] = sourceItems.map(val => ({
+      ensent: val.ensent,
+      cnsent: val.cnsent,
+      rating: 0,
+      itemId: ratingItemKey(val.id),
+    }));
 
-      // When reaching the end, mark exercise as completed
-      this.currentStatus.status = TranslateExerciseStatusEnum.Completed;
-      this.currentStatus.endTime = new Date();
+    // Nothing to review (e.g. a filter excluded every sentence): stay on the list.
+    if (this.reviewStore.start(queue, this.reviewSetting.disableVoice, this.studyContentId)) {
+      this.mode.set('review');
     }
   }
-}
 
-@Component({
-  selector: 'app-translate-exercises-options-dlg',
-  templateUrl: 'translate-exercises-options-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule,
-    MatCheckboxModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatSelectModule,
-    MatDialogContent,
-    MatDialogActions,
-    TranslocoModule,
-  ],
-})
-export class TranslateExercisesOptionsDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<TranslateExercisesOptionsDialogComponent>);
-  readonly transloco = inject(TranslocoService);
-  readonly countOfItems = model(this.data.withSelection ? this.data.reciteQueuesCount : 20);
-  readonly allowEmptyAnswer = model(false);
-  readonly direction = model(TranslateDirectionEnum.EnglishToChinese);
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA)
-    public data: {
-      reciteQueuesCount: number;
-      withSelection: boolean;
-      allDirections: any[];
-      getDirectionName: any;
+  /**
+   * Leave the review session: merge the confirmed ratings captured during it
+   * back into the list view's source of truth (contentRatingMap) so the rating
+   * column reflects any changes once the list is shown again.
+   */
+  onQuitReview() {
+    const confirmedRatings = this.reviewStore.quit();
+
+    const newRatingMap = new Map(this.contentRatingMap());
+    for (const [itemId, rating] of confirmedRatings) {
+      newRatingMap.set(itemId, rating);
+    }
+    this.contentRatingMap.set(newRatingMap);
+    // Ratings changed during the session may move rows in or out of an active
+    // rating filter; the filter string itself is unchanged, so reassign it to
+    // force the predicate to re-run (same trick as onContentRatingChanged).
+    if (this.dataSource.filter && confirmedRatings.size > 0) {
+      this.dataSource.filter = this.dataSource.filter;
     }
-  ) {}
 
-  onNoClick(): void {
-    this.dialogRef.close();
+    this.mode.set('list');
   }
 
-  onYesClick(): void {
-    const closedata: TranslateExerciseOption = {
-      allowEmptyAnswer: this.allowEmptyAnswer(),
-      countOfItems: this.countOfItems(),
-      direction: this.direction(),
-    };
-
-    this.dialogRef.close(closedata);
-  }
-}
+  onQuizWithOptions() {
+    const dialogRef = this.dialog.open(TranslateExercisesQuizOptionsDialogComponent, {
+      data: {
+        sentenceQueueCount:
+          this.selection.selected.length > 0
+            ? this.selection.selected.length
+            : this.visibleRowCount,
+        withSelection: this.selection.selected.length > 0 ? true : false,
+        currentSettings: this.quizSetting,
+      },
+      width: '500px',
+      enterAnimationDuration: 800,
+      exitAnimationDuration: 500,
+    });
 
-@Component({
-  selector: 'app-translate-exercises-printoptions-dlg',
-  templateUrl: 'translate-exercises-printoptions-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule,
-    MatCheckboxModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatSelectModule,
-    MatDialogActions,
-    MatDatepickerModule,
-    MatDateFnsModule,
-    MatRadioModule,
-    TranslocoModule,
-  ],
-  providers: [
-    provideDateFnsAdapter(),
-    { provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
-    { provide: MAT_DATE_LOCALE, useValue: zhCN },
-  ],
-})
-export class TranslateExercisesPrintOptionsDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<TranslateExercisesOptionsDialogComponent>);
-  readonly countOfItems = model(this.data.withSelection ? this.data.reciteQueuesCount : 20);
-  readonly printAnswer = model(false);
-  readonly printWord = model(false);
-  readonly direction = model(TranslateDirectionEnum.EnglishToChinese);
-  readonly printEntryDate = model(true);
-  readonly selectedExecDateModel = model<number>(0);
-  readonly execDate = model(new Date());
-
-  readonly allPrintExecDates = getAllPrintExecDateString();
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA)
-    public data: {
-      reciteQueuesCount: number;
-      withSelection: boolean;
-      allDirections: any[];
-      getDirectionName: any;
-    }
-  ) {}
-
-  onNoClick(): void {
-    this.dialogRef.close();
-  }
-
-  onYesClick(): void {
-    const closedata: TranslateExercisePrintOption = {
-      printAnswer: this.printAnswer(),
-      printWord: this.printWord(),
-      countOfItems: this.countOfItems(),
-      direction: this.direction(),
-      printEntryDate: this.printEntryDate(),
-      respectRetentionCurve: this.selectedExecDateModel() === 1 ? true : false,
-      printExecDate: this.selectedExecDateModel() === 2 ? true : false,
-      execDate: this.selectedExecDateModel() === 2 ? this.execDate() : undefined,
-    };
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(result => {
+        if (result !== undefined) {
+          this.quizSetting.countOfItems = result.countOfItems;
 
-    this.dialogRef.close(closedata);
+          this.onQuizStart();
+        }
+      });
   }
-}
 
-@Component({
-  selector: 'app-translate-exercises-info-dlg',
-  templateUrl: 'translate-exercises-info-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MarkdownContentComponent,
-    TranslocoModule,
-  ],
-})
-export class TranslateExercisesInfoDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<TranslateExercisesInfoDialogComponent>);
-
-  constructor(
-    @Inject(MAT_DIALOG_DATA)
-    public data: {
-      title: string;
-      content: string;
+  /**
+   * Build cloze questions for the quiz: the queue follows the same selection
+   * mechanism as Review (explicit table selection, otherwise the filtered rows
+   * run through prepareSentenceQueue), and the distractor pool is the visible
+   * rows so the filter bar keeps describing what the quiz uses.
+   */
+  onQuizStart() {
+    const visible = this.getVisibleData();
+    // Distractor pool: the visible (filtered) rows, so the filter bar keeps
+    // describing what the quiz uses. Fall back to the whole file when a stale
+    // selection outlives the filter that produced it (visible empty).
+    const pool = visible.length > 0 ? visible : this.dataSource.data.slice();
+    let sourceItems: LearnEnglishSentFileItem[];
+    if (this.selection.selected.length > 0) {
+      // Randomize the array
+      sourceItems = FisherYatesShuffle(this.selection.selected.slice());
+    } else {
+      sourceItems = this.prepareSentenceQueue(visible, this.quizSetting.countOfItems);
     }
-  ) {}
 
-  onCloseClick(): void {
-    this.dialogRef.close();
-  }
-}
+    const questions = buildSentenceQuizQuestions(sourceItems, pool);
 
-@Component({
-  selector: 'app-translate-exercises-llm-dlg',
-  templateUrl: 'translate-exercises-llm-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    MatInputModule,
-    FormsModule,
-    MatCheckboxModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatSelectModule,
-    MatDialogContent,
-    MatDialogActions,
-    TranslocoModule,
-  ],
-  standalone: true,
-})
-export class TranslateExercisesLLMDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<TranslateExercisesLLMDialogComponent>);
-  readonly mode = model(TranslationAIModeEnum.Explain);
-  readonly trans = model('');
-  readonly aireply = model('');
-  readonly transloco = inject(TranslocoService);
-  aiutil = inject(AIService);
-  private readonly destroyRef = inject(DestroyRef);
-  allAIModes = [{ value: TranslationAIModeEnum.Explain }, { value: TranslationAIModeEnum.Correct }];
-  getAIModeName(mode: TranslationAIModeEnum): string {
-    switch (mode) {
-      case TranslationAIModeEnum.Explain:
-        return this.transloco.translate('explain');
-      default:
-        return this.transloco.translate('translateExercises.correct');
+    // Nothing to ask (e.g. a filter excluded every sentence, or every visible
+    // row shares one explanation): stay on the list.
+    if (this.quizStore.start(questions)) {
+      this.mode.set('quiz');
     }
   }
-  get isTranslationModeCorrection(): boolean {
-    return this.mode() === TranslationAIModeEnum.Correct;
+
+  /**
+   * Leave the quiz session (quit mid-session or back from the result screen):
+   * drop every piece of quiz state, then return to the list.
+   */
+  onQuitQuiz() {
+    this.quizStore.reset();
+    this.mode.set('list');
   }
 
-  constructor(@Inject(MAT_DIALOG_DATA) public data: { orgsent: string }) {}
+  private coverContentToQueue(content: LearnEnglishSentFileItem[]): TranslateQueue[] {
+    return content.map(item => ({
+      ensent: item.ensent,
+      cnsent: item.cnsent,
+      enwords: item.enwords,
+      completed: false,
+      inputted: '',
+    }));
+  }
+
+  /**
+   * Rows the table currently shows: filteredData when a filter is active.
+   * Exercise queue prep and selection strategies consume this so the table
+   * filter always describes what the exercises will use.
+   */
+  private getVisibleData(): LearnEnglishSentFileItem[] {
+    return this.dataSource.filter ? this.dataSource.filteredData : this.dataSource.data.slice();
+  }
+  /**
+   * Shared queue-prep pipeline for the exercises when no table rows are
+   * selected: only when over the limit, shuffle and cap to countOfItems.
+   * Never mutates `items` (shuffle/slice produce new arrays).
+   */
+  private prepareSentenceQueue<T>(items: T[], countOfItems: number): T[] {
+    let queues = items;
+    if (queues.length > countOfItems) {
+      // Randomize the array, then keep only the first `countOfItems` items
+      queues = FisherYatesShuffle(queues);
+      queues = queues.slice(0, countOfItems);
+    }
 
-  onNoClick(): void {
-    this.dialogRef.close();
+    return queues;
   }
 
-  onSubmit(): void {
-    if (this.mode() === TranslationAIModeEnum.Explain) {
-      this.aiutil
-        .explainSentence(`请从词汇、语法角度讲解一下'${this.data.orgsent}'，返回长度控制在100字。`)
-        .pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe({
-          next: (data: any) => {
-            this.aireply.set(data.content);
-          },
-          error: err => {
-            console.error(err);
-          },
-        });
-    } else if (this.mode() === TranslationAIModeEnum.Correct) {
-      this.aiutil
-        .explainSentence(
-          `英文原文：'${this.data.orgsent}'，我的翻译为'${this.trans()}', 请从词汇语法角度分析翻译是否正确。返回长度控制在100字。`
-        )
-        .pipe(takeUntilDestroyed(this.destroyRef))
-        .subscribe({
-          next: (data: any) => {
-            this.aireply.set(data.content);
-          },
-          error: err => {
-            console.error(err);
-          },
-        });
+  /** Returns the visible (filtered) rows in the current sort order (mirrors MatSort behavior). */
+  private getSortedData(): LearnEnglishSentFileItem[] {
+    // The MatSort instance lives in the sentence-list child, which wires it
+    // onto this shared data source. Selection strategies consume the same rows
+    // the table shows, so start from the filtered set.
+    const source = this.getVisibleData();
+    const sort = this.dataSource.sort;
+    if (!sort || !sort.active || sort.direction === '') {
+      return source;
     }
-  }
-}
 
-@Component({
-  selector: 'app-translate-selectbyrating-dlg',
-  templateUrl: 'translate-exercises-selectbyrating-dialog.html',
-  imports: [
-    MatFormFieldModule,
-    FormsModule,
-    MatInputModule,
-    MatButtonModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatSelectModule,
-    TranslocoModule,
-  ],
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class TranslateSelectByRatingDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<TranslateSelectByRatingDialogComponent>);
-  readonly ratingOperator = model(RatingOperatorEnum.Equals);
-  readonly ratingValue = model(3);
+    const sorted = source.slice();
+    sorted.sort((a, b) => {
+      const valueA = this.dataSource.sortingDataAccessor(a, sort.active);
+      const valueB = this.dataSource.sortingDataAccessor(b, sort.active);
 
-  get ratingOperators(): { value: RatingOperatorEnum; label: string }[] {
-    return [
-      { value: RatingOperatorEnum.Equals, label: 'operatorEquals' },
-      { value: RatingOperatorEnum.GreaterThan, label: 'operatorGreaterThan' },
-      { value: RatingOperatorEnum.LargerOrEquals, label: 'operatorLargerOrEquals' },
-      { value: RatingOperatorEnum.LessThan, label: 'operatorLessThan' },
-      { value: RatingOperatorEnum.LessOrEquals, label: 'operatorLessOrEquals' },
-    ];
+      let result = 0;
+      if (typeof valueA === 'string' && typeof valueB === 'string') {
+        result = valueA.localeCompare(valueB);
+      } else {
+        result = valueA < valueB ? -1 : valueA > valueB ? 1 : 0;
+      }
+
+      return sort.direction === 'asc' ? result : -result;
+    });
+
+    return sorted;
   }
 
-  get ratingValues(): number[] {
-    return [1, 2, 3, 4, 5];
+  private onSelect(mode: SelectionModeEnum) {
+    const dialogRef = this.dialog.open(TranslateExercisesSelectDialogComponent, {
+      // rowCount bounds By Count's offset. A snapshot of the visible (filtered)
+      // rows, so the dialog's validation matches what selection will act on.
+      data: {
+        mode,
+        rowCount: this.visibleRowCount,
+      },
+      width: '400px',
+      enterAnimationDuration: 800,
+      exitAnimationDuration: 500,
+    });
+
+    dialogRef
+      .afterClosed()
+      .pipe(takeUntilDestroyed(this.destroyRef))
+      .subscribe(result => {
+        if (result !== undefined) {
+          this.applySelectionOption(result);
+        }
+      });
   }
 
-  onNoClick(): void {
-    this.dialogRef.close();
+  /**
+   * Apply a VocabularySelectOption produced by the select dialog. Each mode
+   * maps to its selection strategy; Free Selection is By Count on a shuffled
+   * source with offset 0.
+   */
+  private applySelectionOption(option: VocabularySelectOption): void {
+    switch (option.selectedSelectMode) {
+      case SelectionModeEnum.ByCount: {
+        const count = option.countOfItems ?? 0;
+        if (count > 0) {
+          this.applyCountSelection(this.getSortedData(), option.countOfOffset ?? 0, count);
+        }
+        break;
+      }
+      case SelectionModeEnum.FreeSelection: {
+        const count = option.countOfItems ?? 0;
+        if (count > 0) {
+          this.applyCountSelection(FisherYatesShuffle(this.getVisibleData()), 0, count);
+        }
+        break;
+      }
+      case SelectionModeEnum.ByID:
+        // The sentence select dialog never offers by-word selection.
+        break;
+    }
   }
 
-  onYesClick(): void {
-    this.dialogRef.close({
-      ratingOperator: this.ratingOperator(),
-      ratingValue: this.ratingValue(),
+  /**
+   * Select `count` items from `source` starting at `offset` (window [offset, offset+count)).
+   * Backs both By Count (sorted source) and Free Selection (shuffled source, offset 0) -
+   * the two modes differ only in the source array and whether offset is exposed.
+   */
+  private applyCountSelection(
+    source: LearnEnglishSentFileItem[],
+    offset: number,
+    count: number
+  ): void {
+    this.selection.clear();
+    source.forEach((item, index) => {
+      if (index >= offset && index < offset + count) {
+        this.selection.select(item);
+      }
     });
   }
 }
diff --git a/src/app/pages/vocabulary-exercises/index.ts b/src/app/pages/vocabulary-exercises/index.ts
index 792e6bc..73b1943 100644
--- a/src/app/pages/vocabulary-exercises/index.ts
+++ b/src/app/pages/vocabulary-exercises/index.ts
@@ -1,6 +1,5 @@
 export * from './vocabulary-exercises.component';
 export * from './vocabulary-exercises-worksheetoptions-dialog.component';
-export * from './vocabulary-exercises-rating-filter-dialog.component';
 export * from './vocabulary-exercises-select-dialog.component';
 export * from './vocabulary-exercises-reviewoptions-dialog.component';
 export * from './vocabulary-exercises-review-session.component';
@@ -10,5 +9,4 @@ export * from './vocabulary-exercises-quiz-session.component';
 export * from './vocabulary-exercises-spellingoptions-dialog.component';
 export * from './vocabulary-exercises-spelling-result.component';
 export * from './vocabulary-exercises-spelling-session.component';
-export * from './vocabulary-exercises-word-filter-dialog.component';
 export * from './vocabulary-exercises-word-list.component';
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-dictation-result.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-dictation-result.component.html
index 18a0686..fb5ddae 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-dictation-result.component.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-dictation-result.component.html
@@ -18,7 +18,7 @@
 
       <!-- Chinese Word Column -->
       <ng-container matColumnDef="cnword">
-        <th mat-header-cell *matHeaderCellDef> {{ t('vocabularyExercises.chinese') }} </th>
+        <th mat-header-cell *matHeaderCellDef> {{ t('chinese') }} </th>
         <td mat-cell *matCellDef="let element"> {{element.cnword}} </td>
       </ng-container>
 
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-dictation-session.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-dictation-session.component.html
index 3b8b9e9..756fad0 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-dictation-session.component.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-dictation-session.component.html
@@ -7,8 +7,8 @@
           <mat-progress-bar mode="determinate" [value]="store.progress()"></mat-progress-bar>
         </div>
       </section>
-      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('vocabularyExercises.quit')"
-        [attr.aria-label]="t('vocabularyExercises.quit')" (click)="quit.emit()">
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.quit')"
+        [attr.aria-label]="t('common.quit')" (click)="quit.emit()">
         <mat-icon>cancel_presentation</mat-icon>
       </button>
     </mat-toolbar-row>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quit-confirm-dialog.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quit-confirm-dialog.html
index d90d435..9eecceb 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quit-confirm-dialog.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quit-confirm-dialog.html
@@ -5,6 +5,6 @@ <h2 mat-dialog-title>{{ t('vocabularyExercises.quitConfirmTitle') }}</h2>
   </mat-dialog-content>
   <mat-dialog-actions>
     <button mat-button (click)="onCancelClick()" cdkFocusInitial>{{ t('cancel') }}</button>
-    <button mat-button (click)="onConfirmClick()">{{ t('vocabularyExercises.quit') }}</button>
+    <button mat-button (click)="onConfirmClick()">{{ t('common.quit') }}</button>
   </mat-dialog-actions>
 </div>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-result.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-result.component.html
index b365f3b..4fbdec8 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-result.component.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-result.component.html
@@ -1,6 +1,6 @@
 <ng-container *transloco="let t">
   <div class="container">
-    <div class="result-header">{{ t('vocabularyExercises.score') }}: {{store.correctCount()}} / {{store.questions().length }} </div>
+    <div class="result-header">{{ t('common.score') }}: {{store.correctCount()}} / {{store.questions().length }} </div>
     <button mat-raised-button color="primary" (click)="backToList.emit()">{{ t('backToList') }}</button>
 
     <table mat-table [dataSource]="store.results()" class="mat-elevation-z8 w-full">
@@ -12,13 +12,13 @@
 
       <!-- Chinese Word Column -->
       <ng-container matColumnDef="chinese">
-        <th mat-header-cell *matHeaderCellDef> {{ t('vocabularyExercises.chinese') }} </th>
+        <th mat-header-cell *matHeaderCellDef> {{ t('chinese') }} </th>
         <td mat-cell *matCellDef="let element"> {{element.cnword}} </td>
       </ng-container>
 
       <!-- Correct Column -->
       <ng-container matColumnDef="correct">
-        <th mat-header-cell *matHeaderCellDef> {{ t('vocabularyExercises.correct') }} </th>
+        <th mat-header-cell *matHeaderCellDef> {{ t('common.correct') }} </th>
         <td mat-cell *matCellDef="let element">
           <mat-checkbox [checked]="element.correct" [disabled]="true"></mat-checkbox>
         </td>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.component.html
index 72c7465..a0b759d 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.component.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.component.html
@@ -7,18 +7,18 @@
         </div>
       </section>
       <span class="toolbar-spacer"></span>
-      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('vocabularyExercises.previousQuestion')"
-        [attr.aria-label]="t('vocabularyExercises.previousQuestion')"
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.previousQuestion')"
+        [attr.aria-label]="t('common.previousQuestion')"
         (click)="store.previous()" [disabled]="store.isPreviousDisabled()">
         <mat-icon>arrow_left</mat-icon>
       </button>
-      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('vocabularyExercises.nextQuestion')"
-        [attr.aria-label]="t('vocabularyExercises.nextQuestion')"
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.nextQuestion')"
+        [attr.aria-label]="t('common.nextQuestion')"
         (click)="store.next()" [disabled]="!store.isAnswered()">
         <mat-icon>arrow_right</mat-icon>
       </button>
-      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('vocabularyExercises.quit')"
-        [attr.aria-label]="t('vocabularyExercises.quit')" (click)="quit.emit()">
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.quit')"
+        [attr.aria-label]="t('common.quit')" (click)="quit.emit()">
         <mat-icon>cancel_presentation</mat-icon>
       </button>
     </mat-toolbar-row>
@@ -46,7 +46,7 @@
     </div>
     @if (store.isAnswered()) {
       <div class="vocabulary-test-status" role="status" aria-live="polite">
-        {{ store.isCorrect() ? t('vocabularyExercises.correct') : t('vocabularyExercises.incorrect') }}
+        {{ store.isCorrect() ? t('common.correct') : t('common.incorrect') }}
       </div>
     }
   </div>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.component.spec.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.component.spec.ts
index eb2fb05..9513431 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.component.spec.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.component.spec.ts
@@ -144,7 +144,7 @@ describe('VocabularyExercisesQuizSessionComponent', () => {
       const status = fixture.nativeElement.querySelector('.vocabulary-test-status');
       expect(status).toBeTruthy();
       expect(status.getAttribute('aria-live')).toBe('polite');
-      expect(status.textContent).toContain('vocabularyExercises.correct');
+      expect(status.textContent).toContain('common.correct');
     });
 
     it('announces incorrect after a wrong answer', () => {
@@ -154,7 +154,7 @@ describe('VocabularyExercisesQuizSessionComponent', () => {
 
       const status = fixture.nativeElement.querySelector('.vocabulary-test-status');
       expect(status).toBeTruthy();
-      expect(status.textContent).toContain('vocabularyExercises.incorrect');
+      expect(status.textContent).toContain('common.incorrect');
     });
 
     it('does not render the status region before answering', () => {
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.store.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.store.ts
index 0060a68..9b21bda 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.store.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quiz-session.store.ts
@@ -114,7 +114,7 @@ export class VocabularyQuizSessionStore {
     this.picks.update(p => p.map((v, i) => (i === qi ? index : v)));
     this.results.update(rs => rs.map((r, i) => (i === qi ? { ...r, correct } : r)));
     this.answeredCount.update(c => c + 1);
-    this.audiosrv.playSound(correct ? 'correct.wav' : 'beep.wav');
+    void this.audiosrv.playSound(correct ? 'correct.wav' : 'beep.wav');
   }
 
   /** Move to the next question; answering the last one completes the session. */
@@ -130,7 +130,7 @@ export class VocabularyQuizSessionStore {
       // Session over: leave no live answer state behind.
       this.isComplete.set(true);
       this.currentIndex.set(-1);
-      this.audiosrv.playSound('correct.wav');
+      void this.audiosrv.playSound('correct.wav');
     }
   }
 
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quizoptions-dialog.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quizoptions-dialog.html
index f0882c1..853e783 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-quizoptions-dialog.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-quizoptions-dialog.html
@@ -1,5 +1,5 @@
 <div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('vocabularyExercises.optionsOfTest') }}</h2>
+  <h2 mat-dialog-title>{{ t('common.optionsOfQuiz') }}</h2>
   <mat-dialog-content class="control-full-width">
     <mat-form-field class="control-full-width">
       <mat-label>{{ t('count') }}</mat-label>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.html
deleted file mode 100644
index 21c0352..0000000
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('vocabularyExercises.editRatingFilter') }}</h2>
-  <mat-dialog-content>
-    @for (c of conditions(); track $index) {
-      <div class="condition-row">
-        <mat-form-field subscriptSizing="dynamic" class="condition-operator">
-          <mat-select [(ngModel)]="c.operator">
-            @for (op of ratingOperators; track op.value) {
-              <mat-option [value]="op.value">{{ op.symbol }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field subscriptSizing="dynamic" class="condition-value">
-          <mat-select [(ngModel)]="c.value">
-            @for (val of ratingValues; track val) {
-              <mat-option [value]="val">{{ val }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <button mat-icon-button type="button" (click)="onRemoveCondition($index)"
-          [attr.aria-label]="t('vocabularyExercises.filterClear')">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    }
-    <button mat-stroked-button type="button" (click)="onAddCondition()">
-      <mat-icon>add</mat-icon>
-      {{ t('vocabularyExercises.addCondition') }}
-    </button>
-  </mat-dialog-content>
-  <mat-dialog-actions>
-    <button mat-button (click)="onCancel()">{{ t('vocabularyExercises.cancel') }}</button>
-    <button mat-button (click)="onClose()" cdkFocusInitial>{{ t('close') }}</button>
-  </mat-dialog-actions>
-</div>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.scss b/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.scss
deleted file mode 100644
index 221e46f..0000000
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-.condition-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.condition-operator {
-  width: 90px;
-}
-
-.condition-value {
-  width: 90px;
-}
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.spec.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.spec.ts
deleted file mode 100644
index 1a73244..0000000
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.spec.ts
+++ /dev/null
@@ -1,92 +0,0 @@
-import { provideHttpClient } from '@angular/common/http';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import type { ComponentFixture} from '@angular/core/testing';
-import { TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  TranslocoService,
-  TRANSLOCO_TRANSPILER,
-  TRANSLOCO_MISSING_HANDLER,
-} from '@jsverse/transloco';
-import { of } from 'rxjs';
-
-import { RatingOperatorEnum } from '../../interfaces';
-import type { RatingCondition } from '../../interfaces';
-
-import { VocabularyExercisesRatingFilterDialogComponent } from './vocabulary-exercises-rating-filter-dialog.component';
-
-function mockTranslocoService() {
-  return {
-    setActiveLang: vi.fn(),
-    getActiveLang: vi.fn(),
-    selectTranslate: vi.fn().mockReturnValue(of('')),
-    _loadDependencies: vi.fn().mockReturnValue(of(null)),
-    translate: vi.fn((key: string) => key),
-    activeLang: 'en',
-    config: { reRenderOnLangChange: true, prodMode: false },
-    langChanges$: of('en'),
-    events$: of(),
-  };
-}
-
-describe('VocabularyExercisesRatingFilterDialogComponent', () => {
-  let fixture: ComponentFixture<VocabularyExercisesRatingFilterDialogComponent>;
-  let closeSpy: ReturnType<typeof vi.fn>;
-
-  async function createWith(seed: RatingCondition[]) {
-    closeSpy = vi.fn();
-    await TestBed.configureTestingModule({
-      imports: [VocabularyExercisesRatingFilterDialogComponent, NoopAnimationsModule],
-      providers: [
-        { provide: MAT_DIALOG_DATA, useValue: seed },
-        { provide: MatDialogRef, useValue: { close: closeSpy } },
-        { provide: TranslocoService, useValue: mockTranslocoService() },
-        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
-        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
-        provideHttpClient(),
-        provideHttpClientTesting(),
-      ],
-    }).compileComponents();
-    fixture = TestBed.createComponent(VocabularyExercisesRatingFilterDialogComponent);
-  }
-
-  it('seeds conditions from the injected data without mutating the seed', async () => {
-    const seed: RatingCondition[] = [{ operator: RatingOperatorEnum.Equals, value: 5 }];
-    await createWith(seed);
-    expect(fixture.componentInstance.conditions()).toEqual([{ operator: RatingOperatorEnum.Equals, value: 5 }]);
-    fixture.componentInstance.onAddCondition();
-    expect(seed.length).toBe(1);
-  });
-
-  it('onAddCondition appends a >= 3 condition', async () => {
-    await createWith([]);
-    fixture.componentInstance.onAddCondition();
-    expect(fixture.componentInstance.conditions()).toEqual([
-      { operator: RatingOperatorEnum.LargerOrEquals, value: 3 },
-    ]);
-  });
-
-  it('onRemoveCondition removes the row at the index', async () => {
-    await createWith([
-      { operator: RatingOperatorEnum.Equals, value: 5 },
-      { operator: RatingOperatorEnum.LessThan, value: 2 },
-    ]);
-    fixture.componentInstance.onRemoveCondition(0);
-    expect(fixture.componentInstance.conditions()).toEqual([
-      { operator: RatingOperatorEnum.LessThan, value: 2 },
-    ]);
-  });
-
-  it('onClose closes returning the current conditions', async () => {
-    await createWith([{ operator: RatingOperatorEnum.Equals, value: 5 }]);
-    fixture.componentInstance.onClose();
-    expect(closeSpy).toHaveBeenCalledWith(fixture.componentInstance.conditions());
-  });
-
-  it('onCancel closes with undefined', async () => {
-    await createWith([{ operator: RatingOperatorEnum.Equals, value: 5 }]);
-    fixture.componentInstance.onCancel();
-    expect(closeSpy).toHaveBeenCalledWith();
-  });
-});
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.ts
deleted file mode 100644
index 3d72e87..0000000
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-rating-filter-dialog.component.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatSelectModule } from '@angular/material/select';
-import { TranslocoModule } from '@jsverse/transloco';
-
-import { RatingOperatorEnum } from '../../interfaces';
-import type { RatingCondition } from '../../interfaces';
-
-/**
- * Multi-condition editor for the vocabulary list's Rating filter. Same
- * Close/Cancel semantics as the Word filter dialog. Only the 5 value-based
- * operators are offered (>= > = <= <); each row also picks a value 1–5.
- */
-@Component({
-  selector: 'app-vocabulary-rating-filter-dlg',
-  templateUrl: 'vocabulary-exercises-rating-filter-dialog.component.html',
-  styleUrl: 'vocabulary-exercises-rating-filter-dialog.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    FormsModule,
-    MatButtonModule,
-    MatIconModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatFormFieldModule,
-    MatSelectModule,
-    TranslocoModule,
-  ],
-})
-export class VocabularyExercisesRatingFilterDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<VocabularyExercisesRatingFilterDialogComponent>);
-  // Declared BEFORE `conditions` (see Word dialog note): field initializers
-  // run in declaration order and `conditions`' initializer reads `this.data`.
-  readonly data = inject<RatingCondition[]>(MAT_DIALOG_DATA);
-  readonly conditions = model<RatingCondition[]>(this.data.map(c => ({ ...c })));
-
-  readonly ratingOperators: { value: RatingOperatorEnum; symbol: string }[] = [
-    { value: RatingOperatorEnum.LargerOrEquals, symbol: '>=' },
-    { value: RatingOperatorEnum.GreaterThan, symbol: '>' },
-    { value: RatingOperatorEnum.Equals, symbol: '=' },
-    { value: RatingOperatorEnum.LessOrEquals, symbol: '<=' },
-    { value: RatingOperatorEnum.LessThan, symbol: '<' },
-  ];
-
-  readonly ratingValues = [1, 2, 3, 4, 5];
-
-  onAddCondition(): void {
-    this.conditions.set([
-      ...this.conditions(),
-      { operator: RatingOperatorEnum.LargerOrEquals, value: 3 },
-    ]);
-  }
-
-  onRemoveCondition(index: number): void {
-    const next = this.conditions().slice();
-    next.splice(index, 1);
-    this.conditions.set(next);
-  }
-
-  onCancel(): void {
-    this.dialogRef.close();
-  }
-
-  onClose(): void {
-    this.dialogRef.close(this.conditions());
-  }
-}
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.component.html
index f338bf0..cd4fea6 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.component.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.component.html
@@ -16,23 +16,23 @@
           }
         </mat-select>
       </mat-form-field>
-      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('vocabularyExercises.enableAutoMode')"
-        [attr.aria-label]="t('vocabularyExercises.enableAutoMode')"
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.enableAutoMode')"
+        [attr.aria-label]="t('common.enableAutoMode')"
         (click)="store.enableAutoMode()" [disabled]="store.isAutoMode()">
         <mat-icon>play_circle_outline</mat-icon>
       </button>
-      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('vocabularyExercises.previous')"
-        [attr.aria-label]="t('vocabularyExercises.previous')"
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.previous')"
+        [attr.aria-label]="t('common.previous')"
         (click)="store.previous()" [disabled]="store.isAutoMode() || store.isPreviousDisabled()">
         <mat-icon>arrow_left</mat-icon>
       </button>
-      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('vocabularyExercises.next')"
-        [attr.aria-label]="t('vocabularyExercises.next')"
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.next')"
+        [attr.aria-label]="t('common.next')"
         (click)="store.next()" [disabled]="store.isAutoMode() || store.isNextDisabled()">
         <mat-icon>arrow_right</mat-icon>
       </button>
-      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('vocabularyExercises.quit')"
-        [attr.aria-label]="t('vocabularyExercises.quit')" (click)="quit.emit()">
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.quit')"
+        [attr.aria-label]="t('common.quit')" (click)="quit.emit()">
         <mat-icon>cancel_presentation</mat-icon>
       </button>
     </mat-toolbar-row>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.store.spec.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.store.spec.ts
index c12cda4..f8ae498 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.store.spec.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.store.spec.ts
@@ -1,6 +1,7 @@
 import { TestBed } from '@angular/core/testing';
 import { of, Subject, throwError } from 'rxjs';
 
+import { environment } from '../../../environments/environment';
 import type { ReviewQueueItem, UserLearningRating } from '../../interfaces';
 import { AudioService, LearningRatingService } from '../../services';
 
@@ -11,6 +12,7 @@ describe('VocabularyReviewSessionStore', () => {
   let mockAudioService: {
     speakWord: ReturnType<typeof vi.fn>;
     playSound: ReturnType<typeof vi.fn>;
+    playAuthenticatedOneShot: ReturnType<typeof vi.fn>;
   };
   let mockRatingService: {
     getRatings: ReturnType<typeof vi.fn>;
@@ -28,6 +30,7 @@ describe('VocabularyReviewSessionStore', () => {
     mockAudioService = {
       speakWord: vi.fn(),
       playSound: vi.fn(),
+      playAuthenticatedOneShot: vi.fn().mockResolvedValue(true),
     };
     mockRatingService = {
       getRatings: vi.fn().mockReturnValue(of([])),
@@ -51,6 +54,7 @@ describe('VocabularyReviewSessionStore', () => {
       expect(store.queue()).toEqual([]);
       expect(store.cursor()).toBe(0);
       expect(store.progress()).toBe(0);
+      expect(mockAudioService.playAuthenticatedOneShot).not.toHaveBeenCalled();
       expect(mockAudioService.speakWord).not.toHaveBeenCalled();
       expect(mockRatingService.getRatings).not.toHaveBeenCalled();
     });
@@ -61,12 +65,17 @@ describe('VocabularyReviewSessionStore', () => {
       expect(store.queue().length).toBe(2);
       expect(store.cursor()).toBe(0);
       expect(store.progress()).toBe(50);
-      expect(mockAudioService.speakWord).toHaveBeenCalledWith('hello');
+      expect(mockAudioService.playAuthenticatedOneShot).toHaveBeenCalledWith(
+        `${environment.apiUrl}/api/WordAudio?word=hello`
+      );
+      // Recorded audio resolved successfully: no TTS fallback.
+      expect(mockAudioService.speakWord).not.toHaveBeenCalled();
     });
 
     it('does not speak when voice is disabled', () => {
       store.start([word('hello')], true, 0);
 
+      expect(mockAudioService.playAuthenticatedOneShot).not.toHaveBeenCalled();
       expect(mockAudioService.speakWord).not.toHaveBeenCalled();
     });
 
@@ -173,11 +182,76 @@ describe('VocabularyReviewSessionStore', () => {
 
     it('speaks the word on navigation when voice is enabled', () => {
       store.start([word('hello'), word('world')], false, 0);
-      mockAudioService.speakWord.mockClear();
+      mockAudioService.playAuthenticatedOneShot.mockClear();
 
       store.next();
 
-      expect(mockAudioService.speakWord).toHaveBeenCalledWith('world');
+      expect(mockAudioService.playAuthenticatedOneShot).toHaveBeenCalledWith(
+        `${environment.apiUrl}/api/WordAudio?word=world`
+      );
+      expect(mockAudioService.speakWord).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('pronunciation (MP3-first with TTS fallback)', () => {
+    async function flushTasks(): Promise<void> {
+      await new Promise(resolve => setTimeout(resolve, 0));
+    }
+
+    it('falls back to TTS when the word has no recorded audio', async () => {
+      mockAudioService.playAuthenticatedOneShot.mockResolvedValue(false);
+
+      store.start([word('xyzzy')], false, 0);
+      await flushTasks();
+
+      expect(mockAudioService.speakWord).toHaveBeenCalledWith('xyzzy');
+    });
+
+    it('does not use TTS when recorded audio plays', async () => {
+      mockAudioService.playAuthenticatedOneShot.mockResolvedValue(true);
+
+      store.start([word('hello')], false, 0);
+      await flushTasks();
+
+      expect(mockAudioService.speakWord).not.toHaveBeenCalled();
+    });
+
+    it('ignores a late miss for a word the cursor has already left', async () => {
+      let releaseLate!: (ok: boolean) => void;
+      mockAudioService.playAuthenticatedOneShot
+        .mockImplementationOnce(
+          () =>
+            new Promise<boolean>(resolve => {
+              releaseLate = resolve;
+            })
+        )
+        .mockResolvedValue(true);
+
+      store.start([word('hello'), word('world')], false, 0);
+      store.next(); // 'hello' is superseded by 'world's own fetch
+
+      releaseLate(false); // 'hello' turns out to have no audio - too late
+      await flushTasks();
+
+      expect(mockAudioService.speakWord).not.toHaveBeenCalled();
+    });
+
+    it('drops the fallback once the session is quit/reset', async () => {
+      let releaseLate!: (ok: boolean) => void;
+      mockAudioService.playAuthenticatedOneShot.mockImplementationOnce(
+        () =>
+          new Promise<boolean>(resolve => {
+            releaseLate = resolve;
+          })
+      );
+
+      store.start([word('hello')], false, 0);
+      store.quit();
+
+      releaseLate(false);
+      await flushTasks();
+
+      expect(mockAudioService.speakWord).not.toHaveBeenCalled();
     });
   });
 
@@ -426,11 +500,14 @@ describe('VocabularyReviewSessionStore', () => {
 
     it('speaks the first word when auto mode starts (voice enabled)', () => {
       store.start([word('hello'), word('world')], false, 0);
-      mockAudioService.speakWord.mockClear();
+      mockAudioService.playAuthenticatedOneShot.mockClear();
 
       store.enableAutoMode();
 
-      expect(mockAudioService.speakWord).toHaveBeenCalledWith('hello');
+      expect(mockAudioService.playAuthenticatedOneShot).toHaveBeenCalledWith(
+        `${environment.apiUrl}/api/WordAudio?word=hello`
+      );
+      expect(mockAudioService.speakWord).not.toHaveBeenCalled();
     });
   });
 
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.store.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.store.ts
index e2f4399..ae17443 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.store.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-review-session.store.ts
@@ -2,6 +2,7 @@ import { DestroyRef, Injectable, computed, inject, signal } from '@angular/core'
 import type { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { interval, type Subscription } from 'rxjs';
 
+import { environment } from '../../../environments/environment';
 import type { ReviewQueueItem, UserLearningRating } from '../../interfaces';
 import { AudioService, LearningRatingService } from '../../services';
 
@@ -70,6 +71,9 @@ export class VocabularyReviewSessionStore {
   // response must not overwrite them: it would revert the visible rating and
   // make the already-confirmed save look stale to saveRating's guard.
   private userRatedItemIds = new Set<number>();
+  // Guards the async MP3->TTS fallback in speakCurrent: a slow 404 for an
+  // earlier word (or one fetched before reset/destroy) must not trigger TTS.
+  private speakGeneration = 0;
 
   constructor() {
     // The store lives as long as the page container. If the user navigates
@@ -79,6 +83,7 @@ export class VocabularyReviewSessionStore {
     // late response cannot write into a store whose session is gone (L8).
     this.destroyRef.onDestroy(() => {
       this.stopAutoMode();
+      this.speakGeneration++;
       for (const sub of this.ratingSubscriptions) {
         sub.unsubscribe();
       }
@@ -137,6 +142,9 @@ export class VocabularyReviewSessionStore {
   /** Drop every piece of session state (quit mid-session / back to the list). */
   reset(): void {
     this.stopAutoMode();
+    // A word-audio fetch still in flight must not TTS-fallback now that the
+    // session (and its queue) is gone.
+    this.speakGeneration++;
     // Cancel in-flight rating loads/saves: a response that lands after the
     // session ended would write into the next session's state.
     for (const sub of this.ratingSubscriptions) {
@@ -271,10 +279,25 @@ export class VocabularyReviewSessionStore {
       return;
     }
     const item = this.queue()[this.cursor()];
-    if (item) {
-      // Web Speech API in the browser: no vocabulary leaks to a third-party server.
-      this.audiosrv.speakWord(item.enword);
+    if (!item) {
+      return;
     }
+    // Recorded pronunciation first (GET /api/WordAudio?word=...); Web Speech
+    // API only as the fallback for words without audio (e.g. 404) - the TTS
+    // path keeps vocabulary local to the browser. The generation guard keeps
+    // a slow miss for an earlier word from speaking over the current one.
+    const generation = ++this.speakGeneration;
+    const word = item.enword;
+    this.audiosrv
+      .playAuthenticatedOneShot(
+        `${environment.apiUrl}/api/WordAudio?word=${encodeURIComponent(word)}`
+      )
+      .then(ok => {
+        if (!ok && generation === this.speakGeneration) {
+          this.audiosrv.speakWord(word);
+        }
+      })
+      .catch(err => console.error('Word audio playback failed', err));
   }
 
   private saveRating(item: ReviewQueueItem): void {
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-reviewoptions-dialog.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-reviewoptions-dialog.html
index 3bb3ed6..2eb30ed 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-reviewoptions-dialog.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-reviewoptions-dialog.html
@@ -1,5 +1,5 @@
 <div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('vocabularyExercises.optionsOfStudy') }}</h2>
+  <h2 mat-dialog-title>{{ t('common.optionsOfReview') }}</h2>
   <mat-dialog-content class="control-full-width">
     <mat-form-field class="control-full-width">
       <mat-label>{{ t('count') }}</mat-label>
@@ -7,7 +7,7 @@ <h2 mat-dialog-title>{{ t('vocabularyExercises.optionsOfStudy') }}</h2>
       <span matSuffix>{{data.wordQueueCount}}</span>
     </mat-form-field>
     <div class="control-full-width">
-      <mat-checkbox [(ngModel)]="disableVoice"> {{ t('vocabularyExercises.disableVoice') }}</mat-checkbox>
+      <mat-checkbox [(ngModel)]="disableVoice"> {{ t('common.disableVoice') }}</mat-checkbox>
     </div>
     <div class="control-full-width">
       <mat-checkbox [(ngModel)]="hideExplain"> {{ t('vocabularyExercises.hideExplaination') }} </mat-checkbox>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-select-dialog.component.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-select-dialog.component.ts
index f3f9082..b3a26d7 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-select-dialog.component.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-select-dialog.component.ts
@@ -48,11 +48,11 @@ export class VocabularySelectDialogComponent {
       case SelectionModeEnum.ByID:
         return 'vocabularyExercises.selectWords';
       case SelectionModeEnum.FreeSelection:
-        return 'vocabularyExercises.randomSelect';
+        return 'common.randomSelect';
       case SelectionModeEnum.ByCount:
-        return 'vocabularyExercises.sequenceSelect';
+        return 'common.sequenceSelect';
       default:
-        return 'vocabularyExercises.sequenceSelect';
+        return 'common.sequenceSelect';
     }
   }
 
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-result.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-result.component.html
index e033241..bedb017 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-result.component.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-result.component.html
@@ -1,6 +1,6 @@
 <ng-container *transloco="let t">
   <div class="container">
-    <div class="result-header">{{ t('vocabularyExercises.score') }}: {{store.correctCount()}} / {{store.queue().length }} </div>
+    <div class="result-header">{{ t('common.score') }}: {{store.correctCount()}} / {{store.queue().length }} </div>
     <button mat-raised-button color="primary" (click)="backToList.emit()">{{ t('backToList') }}</button>
 
     <table mat-table [dataSource]="store.results()" class="mat-elevation-z8 w-full">
@@ -12,7 +12,7 @@
 
       <!-- Correct Column -->
       <ng-container matColumnDef="correct">
-        <th mat-header-cell *matHeaderCellDef> {{ t('vocabularyExercises.correct') }} </th>
+        <th mat-header-cell *matHeaderCellDef> {{ t('common.correct') }} </th>
         <td mat-cell *matCellDef="let element">
           <mat-checkbox [checked]="element.correct" [disabled]="true"></mat-checkbox>
         </td>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.html
index 23d9c60..28575cd 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.html
@@ -15,8 +15,8 @@
         [attr.aria-label]="t('vocabularyExercises.nextWord')" (click)="store.nextWord()">
         <mat-icon>arrow_right</mat-icon>
       </button>
-      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('vocabularyExercises.quit')"
-        [attr.aria-label]="t('vocabularyExercises.quit')" (click)="quit.emit()">
+      <button mat-fab class="toolbar-fab-button" [matTooltip]="t('common.quit')"
+        [attr.aria-label]="t('common.quit')" (click)="quit.emit()">
         <mat-icon>cancel_presentation</mat-icon>
       </button>
     </mat-toolbar-row>
@@ -34,7 +34,7 @@
     </div>
     @if (!store.currentResultCorrect()) {
       <div class="vocabulary-typing-status" role="status" aria-live="polite">
-        {{ t('vocabularyExercises.incorrect') }}
+        {{ t('common.incorrect') }}
       </div>
     }
   </div>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.spec.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.spec.ts
index 222dbc2..875f024 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.spec.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.spec.ts
@@ -56,6 +56,7 @@ describe('VocabularyExercisesSpellingSessionComponent', () => {
     ctrlKey?: boolean;
     altKey?: boolean;
     metaKey?: boolean;
+    shiftKey?: boolean;
   }): KeyboardEvent {
     return {
       target: document.body,
@@ -96,6 +97,31 @@ describe('VocabularyExercisesSpellingSessionComponent', () => {
       expect(store.results()[0].correct).toBe(true);
     });
 
+    it('ignores Shift pressed on its own (must not count as a typing error)', () => {
+      component.handleKeyboardEvent(keyup({ key: 'Shift' }));
+
+      expect(store.results()[0].correct).toBe(true);
+      expect(store.letters()[0].visible).toBe(false);
+    });
+
+    it('accepts a capital letter typed with Shift and ignores its trailing Shift keyup', () => {
+      store.start([{ enword: 'Apple', cnword: '苹果', completed: false } as VocabularySpellingQueue], true);
+
+      component.handleKeyboardEvent(keyup({ key: 'A', shiftKey: true }));
+      component.handleKeyboardEvent(keyup({ key: 'Shift' }));
+
+      expect(store.letters()[0].visible).toBe(true);
+      expect(store.letters()[1].visible).toBe(false);
+      expect(store.results()[0].correct).toBe(true);
+    });
+
+    it('ignores CapsLock toggles (must not count as a typing error)', () => {
+      component.handleKeyboardEvent(keyup({ key: 'CapsLock' }));
+
+      expect(store.results()[0].correct).toBe(true);
+      expect(store.letters()[0].visible).toBe(false);
+    });
+
     it('quits on Escape instead of marking the word incorrect (parity with the review screen)', () => {
       const spy = vi.spyOn(component.quit, 'emit');
 
@@ -160,7 +186,7 @@ describe('VocabularyExercisesSpellingSessionComponent', () => {
       const status = fixture.nativeElement.querySelector('.vocabulary-typing-status');
       expect(status).toBeTruthy();
       expect(status.getAttribute('aria-live')).toBe('polite');
-      expect(status.textContent).toContain('vocabularyExercises.incorrect');
+      expect(status.textContent).toContain('common.incorrect');
     });
   });
 });
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.ts
index 6f1a22f..75a2345 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spelling-session.component.ts
@@ -37,12 +37,14 @@ export class VocabularyExercisesSpellingSessionComponent {
   readonly quit = output<void>();
 
   /**
-   * Spelling input: forward word characters to the store, nothing else.
-   * Browser/app chords, focus navigation and button activation keys are not
-   * typing — forwarding them would mark the current word incorrect (a button
-   * activated via Enter/Space on keydown would also "type" the same key).
-   * Escape quits the session, like on the review screen. Space from anywhere
-   * else stays typeable: phrases contain spaces.
+   * Spelling input: forward word characters (and Backspace) to the store,
+   * nothing else. Only single-character keys count as typing; named keys are
+   * ignored — forwarding them would mark the current word incorrect (the
+   * Shift keyup trailing a capital letter, CapsLock toggles, focus navigation
+   * via Enter/Tab, a button activated via Enter/Space that would also "type"
+   * the same key on keyup, arrow/F-keys, ...). Escape quits the session, like
+   * on the review screen. Space from anywhere else stays typeable: phrases
+   * contain spaces.
    */
   @HostListener('document:keyup', ['$event'])
   handleKeyboardEvent(event: KeyboardEvent) {
@@ -55,17 +57,18 @@ export class VocabularyExercisesSpellingSessionComponent {
       return;
     }
 
-    if (event.key === 'Enter' || event.key === 'Tab') {
+    const key = event.key;
+    if (key !== 'Backspace' && key.length !== 1) {
       return;
     }
 
-    if (event.key === ' ') {
+    if (key === ' ') {
       const target = event.target as HTMLElement | null;
       if (target?.closest('button')) {
         return;
       }
     }
 
-    this.store.handleKey(event.key);
+    this.store.handleKey(key);
   }
 }
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spellingoptions-dialog.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spellingoptions-dialog.html
index fbd7168..7cc7025 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-spellingoptions-dialog.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-spellingoptions-dialog.html
@@ -7,7 +7,7 @@ <h2 mat-dialog-title>{{ t('vocabularyExercises.optionsOfTyping') }}</h2>
       <span matSuffix>{{data.wordQueueCount}}</span>
     </mat-form-field>
     <div class="control-full-width">
-      <mat-checkbox [(ngModel)]="disableVoice"> {{ t('vocabularyExercises.disableVoice') }}</mat-checkbox>
+      <mat-checkbox [(ngModel)]="disableVoice"> {{ t('common.disableVoice') }}</mat-checkbox>
     </div>
     <div class="control-full-width">
       <mat-checkbox [(ngModel)]="hideExplain"> {{ t('vocabularyExercises.hideExplaination') }} </mat-checkbox>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.html
deleted file mode 100644
index 8113912..0000000
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<div *transloco="let t">
-  <h2 mat-dialog-title>{{ t('vocabularyExercises.editWordFilter') }}</h2>
-  <mat-dialog-content>
-    @for (c of conditions(); track $index) {
-      <div class="condition-row">
-        <mat-form-field subscriptSizing="dynamic">
-          <mat-select [(ngModel)]="c.operator">
-            @for (op of wordOperators; track op.value) {
-              <mat-option [value]="op.value">{{ t('vocabularyExercises.' + op.labelKey) }}</mat-option>
-            }
-          </mat-select>
-        </mat-form-field>
-        <mat-form-field subscriptSizing="dynamic" class="condition-text">
-          <input matInput required [(ngModel)]="c.text" #textModel="ngModel"
-            [disabled]="isPhraseOp(c.operator)" />
-          @if (textModel.invalid && (textModel.dirty || textModel.touched)) {
-            <mat-error>{{ t('vocabularyExercises.filterTextRequired') }}</mat-error>
-          }
-        </mat-form-field>
-        <button mat-icon-button type="button" (click)="onRemoveCondition($index)"
-          [attr.aria-label]="t('vocabularyExercises.filterClear')">
-          <mat-icon>delete</mat-icon>
-        </button>
-      </div>
-    }
-    <button mat-stroked-button type="button" (click)="onAddCondition()">
-      <mat-icon>add</mat-icon>
-      {{ t('vocabularyExercises.addCondition') }}
-    </button>
-  </mat-dialog-content>
-  <mat-dialog-actions>
-    <button mat-button (click)="onCancel()">{{ t('vocabularyExercises.cancel') }}</button>
-    <button mat-button (click)="onClose()" cdkFocusInitial [disabled]="hasEmptyCondition()">{{ t('close') }}</button>
-  </mat-dialog-actions>
-</div>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.scss b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.scss
deleted file mode 100644
index 4ff4ed1..0000000
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-.condition-row {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-.condition-text {
-  flex: 1 1 auto;
-}
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.spec.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.spec.ts
deleted file mode 100644
index baff219..0000000
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.spec.ts
+++ /dev/null
@@ -1,122 +0,0 @@
-import { provideHttpClient } from '@angular/common/http';
-import { provideHttpClientTesting } from '@angular/common/http/testing';
-import type { ComponentFixture} from '@angular/core/testing';
-import { TestBed } from '@angular/core/testing';
-import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  TranslocoService,
-  TRANSLOCO_TRANSPILER,
-  TRANSLOCO_MISSING_HANDLER,
-} from '@jsverse/transloco';
-import { of } from 'rxjs';
-
-import type { WordCondition } from '../../interfaces';
-
-import { VocabularyExercisesWordFilterDialogComponent } from './vocabulary-exercises-word-filter-dialog.component';
-
-function mockTranslocoService() {
-  return {
-    setActiveLang: vi.fn(),
-    getActiveLang: vi.fn(),
-    selectTranslate: vi.fn().mockReturnValue(of('')),
-    _loadDependencies: vi.fn().mockReturnValue(of(null)),
-    translate: vi.fn((key: string) => key),
-    activeLang: 'en',
-    config: { reRenderOnLangChange: true, prodMode: false },
-    langChanges$: of('en'),
-    events$: of(),
-  };
-}
-
-describe('VocabularyExercisesWordFilterDialogComponent', () => {
-  let fixture: ComponentFixture<VocabularyExercisesWordFilterDialogComponent>;
-  let closeSpy: ReturnType<typeof vi.fn>;
-
-  async function createWith(seed: WordCondition[]) {
-    closeSpy = vi.fn();
-    await TestBed.configureTestingModule({
-      imports: [VocabularyExercisesWordFilterDialogComponent, NoopAnimationsModule],
-      providers: [
-        { provide: MAT_DIALOG_DATA, useValue: seed },
-        { provide: MatDialogRef, useValue: { close: closeSpy } },
-        { provide: TranslocoService, useValue: mockTranslocoService() },
-        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
-        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
-        provideHttpClient(),
-        provideHttpClientTesting(),
-      ],
-    }).compileComponents();
-    fixture = TestBed.createComponent(VocabularyExercisesWordFilterDialogComponent);
-  }
-
-  it('seeds conditions from the injected data without mutating the seed', async () => {
-    const seed: WordCondition[] = [{ operator: 'startsWith', text: 'a' }];
-    await createWith(seed);
-    expect(fixture.componentInstance.conditions().length).toBe(1);
-    expect(fixture.componentInstance.conditions()[0]).toEqual({ operator: 'startsWith', text: 'a' });
-    // Mutating the dialog's copy must not touch the caller's array.
-    fixture.componentInstance.onAddCondition();
-    expect(seed.length).toBe(1);
-  });
-
-  it('onAddCondition appends a blank contains condition', async () => {
-    await createWith([]);
-    fixture.componentInstance.onAddCondition();
-    expect(fixture.componentInstance.conditions()).toEqual([{ operator: 'contains', text: '' }]);
-  });
-
-  it('onRemoveCondition removes the row at the index', async () => {
-    await createWith([
-      { operator: 'startsWith', text: 'a' },
-      { operator: 'endsWith', text: 'ing' },
-    ]);
-    fixture.componentInstance.onRemoveCondition(0);
-    expect(fixture.componentInstance.conditions()).toEqual([{ operator: 'endsWith', text: 'ing' }]);
-  });
-
-  it('onClose closes returning the current conditions', async () => {
-    await createWith([{ operator: 'startsWith', text: 'a' }]);
-    fixture.componentInstance.onClose();
-    expect(closeSpy).toHaveBeenCalledWith(fixture.componentInstance.conditions());
-  });
-
-  it('hasEmptyCondition is true when any condition text is blank or whitespace', async () => {
-    await createWith([{ operator: 'contains', text: '  ' }]);
-    expect(fixture.componentInstance.hasEmptyCondition()).toBe(true);
-    fixture.componentInstance.conditions.set([{ operator: 'contains', text: 'a' }]);
-    expect(fixture.componentInstance.hasEmptyCondition()).toBe(false);
-  });
-
-  it('hasEmptyCondition ignores blank text on the phrase operators', async () => {
-    await createWith([
-      { operator: 'isPhrase', text: '' },
-      { operator: 'notPhrase', text: '   ' },
-    ]);
-    expect(fixture.componentInstance.hasEmptyCondition()).toBe(false);
-    // A blank text condition alongside still blocks Close.
-    fixture.componentInstance.conditions.set([
-      { operator: 'isPhrase', text: '' },
-      { operator: 'contains', text: '' },
-    ]);
-    expect(fixture.componentInstance.hasEmptyCondition()).toBe(true);
-  });
-
-  it('isPhraseOp is true only for the phrase operators', async () => {
-    await createWith([]);
-    expect(fixture.componentInstance.isPhraseOp('isPhrase')).toBe(true);
-    expect(fixture.componentInstance.isPhraseOp('notPhrase')).toBe(true);
-    expect(fixture.componentInstance.isPhraseOp('contains')).toBe(false);
-  });
-
-  it('hasEmptyCondition is false with no conditions (empty list clears the filter)', async () => {
-    await createWith([]);
-    expect(fixture.componentInstance.hasEmptyCondition()).toBe(false);
-  });
-
-  it('onCancel closes with undefined (no argument)', async () => {
-    await createWith([{ operator: 'startsWith', text: 'a' }]);
-    fixture.componentInstance.onCancel();
-    expect(closeSpy).toHaveBeenCalledWith();
-  });
-});
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.ts
deleted file mode 100644
index 354ee61..0000000
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-filter-dialog.component.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import { ChangeDetectionStrategy, Component, inject, model } from '@angular/core';
-import { FormsModule } from '@angular/forms';
-import { MatButtonModule } from '@angular/material/button';
-import {
-  MAT_DIALOG_DATA,
-  MatDialogActions,
-  MatDialogContent,
-  MatDialogRef,
-  MatDialogTitle,
-} from '@angular/material/dialog';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatIconModule } from '@angular/material/icon';
-import { MatInputModule } from '@angular/material/input';
-import { MatSelectModule } from '@angular/material/select';
-import { TranslocoModule } from '@jsverse/transloco';
-
-import { isPhraseOperator, type WordCondition, type WordMatchOperator } from '../../interfaces';
-
-/**
- * Multi-condition editor for the vocabulary list's Word filter. Seeded with
- * the current conditions (empty array for a new filter). `Close` returns the
- * edited list (an empty list clears the dimension); `Cancel` / backdrop / Esc
- * return `undefined` so the caller leaves the previous filter untouched. The
- * seed is cloned so an edit never mutates the caller's array before Close.
- */
-@Component({
-  selector: 'app-vocabulary-word-filter-dlg',
-  templateUrl: 'vocabulary-exercises-word-filter-dialog.component.html',
-  styleUrl: 'vocabulary-exercises-word-filter-dialog.component.scss',
-  changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    FormsModule,
-    MatButtonModule,
-    MatIconModule,
-    MatDialogTitle,
-    MatDialogContent,
-    MatDialogActions,
-    MatFormFieldModule,
-    MatInputModule,
-    MatSelectModule,
-    TranslocoModule,
-  ],
-})
-export class VocabularyExercisesWordFilterDialogComponent {
-  readonly dialogRef = inject(MatDialogRef<VocabularyExercisesWordFilterDialogComponent>);
-  // Declared BEFORE `conditions` because field initializers run in
-  // declaration order — `conditions`' initializer reads `this.data`, so the
-  // seed would be undefined if the order were reversed.
-  readonly data = inject<WordCondition[]>(MAT_DIALOG_DATA);
-  /** Current conditions for editing; cloned from the seed to avoid leaking edits on cancel. */
-  readonly conditions = model<WordCondition[]>(this.data.map(c => ({ ...c })));
-
-  readonly wordOperators: { value: WordMatchOperator; labelKey: string }[] = [
-    { value: 'startsWith', labelKey: 'wordOpStartsWith' },
-    { value: 'contains', labelKey: 'wordOpContains' },
-    { value: 'equal', labelKey: 'wordOpEqual' },
-    { value: 'endsWith', labelKey: 'wordOpEndsWith' },
-    { value: 'isPhrase', labelKey: 'wordOpIsPhrase' },
-    { value: 'notPhrase', labelKey: 'wordOpNotPhrase' },
-  ];
-
-  /** Phrase operators need no text; their row disables the text input. */
-  isPhraseOp(op: WordMatchOperator): boolean {
-    return isPhraseOperator(op);
-  }
-
-  onAddCondition(): void {
-    this.conditions.set([...this.conditions(), { operator: 'contains', text: '' }]);
-  }
-
-  /** True when any text condition's text is blank; blank text is invalid and blocks Close. */
-  hasEmptyCondition(): boolean {
-    return this.conditions().some(c => !isPhraseOperator(c.operator) && c.text.trim() === '');
-  }
-
-  onRemoveCondition(index: number): void {
-    const next = this.conditions().slice();
-    next.splice(index, 1);
-    this.conditions.set(next);
-  }
-
-  onCancel(): void {
-    this.dialogRef.close();
-  }
-
-  onClose(): void {
-    this.dialogRef.close(this.conditions());
-  }
-}
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.html
index 3ac0380..b6f5d98 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.html
@@ -2,7 +2,7 @@
   <mat-toolbar class="container">
     <mat-toolbar-row>
       <span>
-        <h5>{{ t('vocabularyExercises.title') }}</h5>
+        <h5>{{ t('vocabulary') }}</h5>
       </span>
       <span class="toolbar-spacer"></span>
       <mat-form-field class="page-toolbar-item">
@@ -40,32 +40,30 @@ <h5>{{ t('vocabularyExercises.title') }}</h5>
       <div class="filter-bar">
         <mat-form-field class="filter-bar-free-text" subscriptSizing="dynamic">
           <mat-label>{{ t('filter') }}</mat-label>
-          <input matInput [(ngModel)]="freeText" (keyup)="onFreeTextChanged()" [disabled]="!selectedFile()" />
+          <input matInput [(ngModel)]="freeText"
+            (input)="onFreeTextChanged($any($event.target).value)"
+            (compositionstart)="onCompositionStart()"
+            (compositionend)="onCompositionEnd($any($event.target).value)"
+            [disabled]="!selectedFile()" />
         </mat-form-field>
 
-        <button mat-stroked-button [matMenuTriggerFor]="wordMenu" [disabled]="!selectedFile()">{{ t('vocabularyExercises.word') }} ▾</button>
-        <mat-menu #wordMenu="matMenu">
-          <button mat-menu-item (click)="defineWordFilter.emit()">{{ wordMenuLabel }}</button>
-          <button mat-menu-item (click)="clearWordFilter.emit()" [disabled]="!hasWordFilter">{{ t('vocabularyExercises.filterClear') }}</button>
-        </mat-menu>
-
-        <button mat-stroked-button [matMenuTriggerFor]="ratingMenu" [disabled]="!selectedFile()">{{ t('rating') }} ▾</button>
-        <mat-menu #ratingMenu="matMenu">
-          <button mat-menu-item (click)="defineRatingFilter.emit()">{{ ratingMenuLabel }}</button>
-          <button mat-menu-item (click)="clearRatingFilter.emit()" [disabled]="!hasRatingFilter">{{ t('vocabularyExercises.filterClear') }}</button>
+        <button mat-stroked-button [matMenuTriggerFor]="filterMenu" [disabled]="!selectedFile()">{{ t('filter') }} ▾</button>
+        <mat-menu #filterMenu="matMenu">
+          <button mat-menu-item (click)="defineFilter.emit()">{{ filterMenuLabel }}</button>
+          <button mat-menu-item (click)="clearFilter.emit()" [disabled]="!hasFilter">{{ t('common.filterClear') }}</button>
         </mat-menu>
       </div>
 
       <div class="filter-bar-actions">
-        <button mat-stroked-button [matMenuTriggerFor]="quickMenu" [disabled]="!selectedFile()">{{ t('vocabularyExercises.quickSelection') }} ▾</button>
+        <button mat-stroked-button [matMenuTriggerFor]="quickMenu" [disabled]="!selectedFile()">{{ t('common.quickSelection') }} ▾</button>
         <mat-menu #quickMenu="matMenu">
           <button mat-menu-item (click)="quickSelect.emit('random')">
             <mat-icon>shuffle</mat-icon>
-            <span>{{ t('vocabularyExercises.randomSelect') }}</span>
+            <span>{{ t('common.randomSelect') }}</span>
           </button>
           <button mat-menu-item (click)="quickSelect.emit('sequence')">
             <mat-icon>format_list_numbered</mat-icon>
-            <span>{{ t('vocabularyExercises.sequenceSelect') }}</span>
+            <span>{{ t('common.sequenceSelect') }}</span>
           </button>
           <button mat-menu-item (click)="quickSelect.emit('words')">
             <mat-icon>text_fields</mat-icon>
@@ -74,15 +72,15 @@ <h5>{{ t('vocabularyExercises.title') }}</h5>
           <mat-divider></mat-divider>
           <button mat-menu-item (click)="clearSelection.emit()" [disabled]="selection().isEmpty()">
             <mat-icon>deselect</mat-icon>
-            <span>{{ t('vocabularyExercises.clearSelection') }}</span>
+            <span>{{ t('common.clearSelection') }}</span>
           </button>
         </mat-menu>
 
-        <button mat-stroked-button [matMenuTriggerFor]="exerciseMenu" [disabled]="!selectedFile()">{{ t('vocabularyExercises.exercises') }} ▾</button>
+        <button mat-stroked-button [matMenuTriggerFor]="exerciseMenu" [disabled]="!selectedFile()">{{ t('common.exercises') }} ▾</button>
         <mat-menu #exerciseMenu="matMenu">
           <button mat-menu-item (click)="review.emit()">
             <mat-icon>slideshow</mat-icon>
-            <span>{{ t('vocabularyExercises.study') }}</span>
+            <span>{{ t('review') }}</span>
           </button>
           <button mat-menu-item (click)="worksheet.emit()">
             <mat-icon>print</mat-icon>
@@ -98,7 +96,7 @@ <h5>{{ t('vocabularyExercises.title') }}</h5>
           </button>
           <button mat-menu-item (click)="quiz.emit()">
             <mat-icon>quiz</mat-icon>
-            <span>{{ t('vocabularyExercises.test') }}</span>
+            <span>{{ t('quiz') }}</span>
           </button>
         </mat-menu>
         <mat-divider [vertical]="true"></mat-divider>
@@ -107,7 +105,7 @@ <h5>{{ t('vocabularyExercises.title') }}</h5>
         <div class="filter-bar-counts">
           <span [matTooltip]="t('items')">{{ wordQueueCount }}</span>
           <mat-divider [vertical]="true"></mat-divider>
-          <span [matTooltip]="t('vocabularyExercises.filteredItems')">{{ visibleRowCount }}</span>
+          <span [matTooltip]="t('common.filteredItems')">{{ visibleRowCount }}</span>
           <mat-divider [vertical]="true"></mat-divider>
           <span [matTooltip]="t('totalSelections')">{{ selectionCount() }}</span>
         </div>
@@ -143,21 +141,21 @@ <h5>{{ t('vocabularyExercises.title') }}</h5>
 
       <!-- Chinese Word Column -->
       <ng-container matColumnDef="cnword">
-        <th mat-header-cell *matHeaderCellDef> {{ t('vocabularyExercises.chinese') }} </th>
+        <th mat-header-cell *matHeaderCellDef> {{ t('chinese') }} </th>
         <td mat-cell *matCellDef="let element"> {{element.cnword}} </td>
       </ng-container>
 
-      <!-- Rating Column -->
+      <!-- Rating Column (rendered only when ratings apply to the loaded file) -->
       <ng-container matColumnDef="rating">
         <th mat-header-cell *matHeaderCellDef mat-sort-header sortActionDescription="Sort by rating"> {{ t('rating') }} </th>
         <td mat-cell *matCellDef="let element">
           <mat-button-toggle-group [ngModel]="getRating(element.id)" aria-label="Rating"
             (change)="contentRatingChanged.emit({ item: element, event: $event })">
-            <mat-button-toggle [value]="1" [disabled]="!ratingsEnabled()">1</mat-button-toggle>
-            <mat-button-toggle [value]="2" [disabled]="!ratingsEnabled()">2</mat-button-toggle>
-            <mat-button-toggle [value]="3" [disabled]="!ratingsEnabled()">3</mat-button-toggle>
-            <mat-button-toggle [value]="4" [disabled]="!ratingsEnabled()">4</mat-button-toggle>
-            <mat-button-toggle [value]="5" [disabled]="!ratingsEnabled()">5</mat-button-toggle>
+            <mat-button-toggle [value]="1">1</mat-button-toggle>
+            <mat-button-toggle [value]="2">2</mat-button-toggle>
+            <mat-button-toggle [value]="3">3</mat-button-toggle>
+            <mat-button-toggle [value]="4">4</mat-button-toggle>
+            <mat-button-toggle [value]="5">5</mat-button-toggle>
           </mat-button-toggle-group>
         </td>
       </ng-container>
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.scss b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.scss
index aba7ff3..11b3e9f 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.scss
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.scss
@@ -19,10 +19,6 @@
   margin-left: 4px;
 }
 
-th.mat-sort-header-sorted {
-    color: black;
-}
-
 // Row above the table: the bordered filter box (free text + Word/Rating
 // filters) on the left, the action menus and counts on the right.
 .filter-row {
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.spec.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.spec.ts
index dfcfa1c..5cf23b1 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.spec.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.spec.ts
@@ -6,20 +6,40 @@ import { TestBed } from '@angular/core/testing';
 import { MatTableDataSource } from '@angular/material/table';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { TranslocoModule, TranslocoService, TRANSLOCO_TRANSPILER, TRANSLOCO_MISSING_HANDLER } from '@jsverse/transloco';
+import { FilterJoinType, FilterOperation } from 'actslib';
+import type { IFilterCondition, IFilterDefinition } from 'actslib';
 import { of } from 'rxjs';
 
-import { RatingOperatorEnum } from '../../interfaces';
+import { VOCABULARY_IS_PHRASE } from '../../interfaces';
 import type { LearnEnglishWordFileItem, LearningContent } from '../../interfaces';
 
 import { VocabularyExercisesWordListComponent } from './vocabulary-exercises-word-list.component';
 
+// cond/andG/orG build the actslib definition the filter input now carries.
+const cond = (property: string, operation: FilterOperation, lowValue: string | number): IFilterCondition => ({
+  property,
+  operation,
+  lowValue,
+});
+const andG = (...conditions: Array<IFilterCondition | IFilterDefinition>): IFilterDefinition => ({
+  join: FilterJoinType.AND,
+  conditions,
+});
+const orG = (...conditions: Array<IFilterCondition | IFilterDefinition>): IFilterDefinition => ({
+  join: FilterJoinType.OR,
+  conditions,
+});
+
 function mockTransloco() {
   return {
     setActiveLang: vi.fn(),
     getActiveLang: vi.fn(),
     selectTranslate: vi.fn().mockReturnValue(of('')),
     _loadDependencies: vi.fn().mockReturnValue(of(null)),
-    translate: vi.fn((key: string) => key),
+    // Returns the key's last dot-segment as the "label": short enough that
+    // the filter summary stays under the 40-char ellipsis, keeping the
+    // summary assertions readable (single-segment keys pass through).
+    translate: vi.fn((key: string) => key.split('.').pop() ?? key),
     activeLang: 'en',
     config: { reRenderOnLangChange: true, prodMode: false },
     langChanges$: of('en'),
@@ -51,59 +71,85 @@ describe('VocabularyExercisesWordListComponent', () => {
     fixture.componentRef.setInput('dataSource', new MatTableDataSource<LearnEnglishWordFileItem>([]));
     fixture.componentRef.setInput('selection', new SelectionModel<LearnEnglishWordFileItem>(true, []));
     fixture.componentRef.setInput('contentRatings', new Map<number, number>());
-    fixture.componentRef.setInput('wordConditions', []);
-    fixture.componentRef.setInput('ratingConditions', []);
+    fixture.componentRef.setInput('filterDefinition', andG());
     // Do NOT call detectChanges: class-logic tests only (getters read signal
     // inputs + the mock translate); rendering *transloco is unnecessary.
   });
 
-  it('shows "New" for the Word menu when there are no active conditions', () => {
-    expect(component.hasWordFilter).toBe(false);
-    expect(component.wordMenuLabel).toBe('vocabularyExercises.filterNew');
+  it('shows "New" for the Filter menu when there are no active conditions', () => {
+    expect(component.hasFilter).toBe(false);
+    expect(component.filterMenuLabel).toBe('filterNew');
   });
 
-  it('builds a readable Word menu summary when conditions are active', () => {
-    fixture.componentRef.setInput('wordConditions', [
-      { operator: 'startsWith', text: 'a' },
-      { operator: 'endsWith', text: 'ing' },
-    ]);
-    expect(component.hasWordFilter).toBe(true);
-    // The mock translate returns the full i18n key verbatim (long), so the
-    // 40-char ellipsizing kicks in. In the real app the short localized
-    // labels ("Starts with a; ends with ing") fit without truncation.
-    expect(component.wordMenuLabel).toContain('vocabularyExercises.wordOpStartsWith a');
-    expect(component.wordMenuLabel.endsWith('…')).toBe(true);
+  it('builds a readable Filter menu summary when conditions are active', () => {
+    fixture.componentRef.setInput('filterDefinition', andG(cond('enword', FilterOperation.BeginsWith, 'a')));
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toBe('word opStartsWith a');
   });
 
-  it('treats blank-text conditions as no filter', () => {
-    fixture.componentRef.setInput('wordConditions', [{ operator: 'contains', text: '   ' }]);
-    expect(component.hasWordFilter).toBe(false);
-    expect(component.wordMenuLabel).toBe('vocabularyExercises.filterNew');
+  it('labels cnword conditions with the Chinese field name', () => {
+    fixture.componentRef.setInput('filterDefinition', andG(cond('cnword', FilterOperation.Contains, '苹果')));
+    expect(component.filterMenuLabel).toBe('chinese opContains 苹果');
   });
 
   it('treats a textless phrase condition as an active filter', () => {
-    fixture.componentRef.setInput('wordConditions', [{ operator: 'isPhrase', text: '' }]);
-    expect(component.hasWordFilter).toBe(true);
-    expect(component.wordMenuLabel).toContain('vocabularyExercises.wordOpIsPhrase');
+    fixture.componentRef.setInput('filterDefinition', andG(VOCABULARY_IS_PHRASE.emit('enword')));
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toBe('word wordOpIsPhrase');
+  });
+
+  it('joins word and rating leaves with the group join word in one summary', () => {
+    fixture.componentRef.setInput('filterDefinition', andG(
+      cond('enword', FilterOperation.BeginsWith, 'a'),
+      cond('rating', FilterOperation.GreaterOrEqual, 3),
+    ));
+    // Numeric properties render comparison operators as symbols; the join word
+    // is translated (mock returns the key's last segment).
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toBe('word opStartsWith a joinAnd rating >= 3');
+  });
+
+  it('shows the OR join word for an OR-joined group', () => {
+    fixture.componentRef.setInput('filterDefinition', orG(
+      cond('enword', FilterOperation.BeginsWith, 'a'),
+      cond('rating', FilterOperation.Equal, 5),
+    ));
+    expect(component.filterMenuLabel).toBe('word opStartsWith a joinOr rating = 5');
+  });
+
+  it('wraps nested multi-member groups in parentheses in the menu summary', () => {
+    fixture.componentRef.setInput('filterDefinition', orG(
+      andG(
+        cond('enword', FilterOperation.Equal, 'a'),
+        cond('enword', FilterOperation.Equal, 'b'),
+      ),
+    ));
+    expect(component.filterMenuLabel).toBe('(word opEqual a joinAnd word opEqual b)');
   });
 
-  it('shows "New" for the Rating menu when empty and a symbol summary otherwise', () => {
-    expect(component.hasRatingFilter).toBe(false);
-    expect(component.ratingMenuLabel).toBe('vocabularyExercises.filterNew');
-    fixture.componentRef.setInput('ratingConditions', [
-      { operator: RatingOperatorEnum.LargerOrEquals, value: 3 },
-    ]);
-    expect(component.hasRatingFilter).toBe(true);
-    expect(component.ratingMenuLabel).toBe('>=3');
+  it('shows a rating-only summary when no vocabulary condition is active', () => {
+    fixture.componentRef.setInput('filterDefinition', andG(cond('rating', FilterOperation.GreaterOrEqual, 3)));
+    expect(component.hasFilter).toBe(true);
+    expect(component.filterMenuLabel).toBe('rating >= 3');
   });
 
   it('emits freeTextChanged with the local freeText value', () => {
     const spy = vi.spyOn(component.freeTextChanged, 'emit');
     component.freeText = 'abc';
-    component.onFreeTextChanged();
+    component.onFreeTextChanged('abc');
     expect(spy).toHaveBeenCalledWith('abc');
   });
 
+  it('suppresses free-text emission while an IME composition is in progress', () => {
+    const spy = vi.spyOn(component.freeTextChanged, 'emit');
+    component.onCompositionStart();
+    component.onFreeTextChanged('pin');
+    expect(spy).not.toHaveBeenCalled();
+
+    component.onCompositionEnd('拼音');
+    expect(spy).toHaveBeenCalledWith('拼音');
+  });
+
   it('emits the quickSelect mode', () => {
     const spy = vi.spyOn(component.quickSelect, 'emit');
     component.quickSelect.emit('random');
@@ -171,7 +217,7 @@ describe('VocabularyExercisesWordListComponent', () => {
     });
   });
 
-  describe('rating toggle disabling for temp content (L2)', () => {
+  describe('rating column visibility for temp content (L2)', () => {
     const rows: LearnEnglishWordFileItem[] = [
       { id: 1, enword: 'hello', cnword: '你好' },
     ];
@@ -184,25 +230,31 @@ describe('VocabularyExercisesWordListComponent', () => {
       fixture.detectChanges();
     }
 
-    it('enables the rating toggles for persisted content (studyContentId > 0)', () => {
+    // The mock TranslocoService returns the key verbatim, so the header cell
+    // text is exactly 'rating'. (nativeElement is untyped here: pass an
+    // explicit element type to the mapper rather than a selector generic.)
+    const ratingHeaderCellCount = (): number =>
+      Array.from(
+        fixture.nativeElement.querySelectorAll('th'),
+        (th: Element) => th.textContent?.trim() ?? ''
+      ).filter(text => text === 'rating').length;
+    const ratingToggleCount = (): number =>
+      fixture.nativeElement.querySelectorAll('mat-button-toggle button').length;
+
+    it('renders the rating column for persisted content (studyContentId > 0)', () => {
       setupRatingsEnabled(true);
-      const buttons = Array.from(
-        fixture.nativeElement.querySelectorAll('mat-button-toggle button')
-      ) as HTMLButtonElement[];
-      expect(buttons.length).toBe(5);
-      buttons.forEach(btn => expect(btn.disabled).toBe(false));
+      expect(ratingHeaderCellCount()).toBe(1);
+      expect(component.displayedColumns).toContain('rating');
+      expect(ratingToggleCount()).toBe(5);
     });
 
-    it('disables the rating toggles for temp content (non-positive studyContentId)', () => {
+    it('hides the rating column entirely for temp content (non-positive studyContentId)', () => {
+      // Temp uploads cannot persist ratings: no value is displayed and no
+      // toggle can latch a phantom rating, so the whole column disappears.
       setupRatingsEnabled(false);
-      // Disabling each toggle (rather than the group, whose [disabled] the
-      // [ngModel] form control overrides via setDisabledState) prevents
-      // clicking a phantom rating the server cannot persist.
-      const buttons = Array.from(
-        fixture.nativeElement.querySelectorAll('mat-button-toggle button')
-      ) as HTMLButtonElement[];
-      expect(buttons.length).toBe(5);
-      buttons.forEach(btn => expect(btn.disabled).toBe(true));
+      expect(ratingHeaderCellCount()).toBe(0);
+      expect(ratingToggleCount()).toBe(0);
+      expect(component.displayedColumns).not.toContain('rating');
     });
   });
 
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.ts
index 6a1f9a9..1937cd7 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-word-list.component.ts
@@ -32,9 +32,17 @@ import { MatTableModule } from '@angular/material/table';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import type { IFilterDefinition } from 'actslib';
 
-import type { LearnEnglishWordFileItem, LearningContent, WordCondition, RatingCondition, WordMatchOperator } from '../../interfaces';
-import { RatingOperatorEnum, isWordConditionActive, summarizeWordFilter, summarizeRatingFilter } from '../../interfaces';
+import type { LearnEnglishWordFileItem, LearningContent } from '../../interfaces';
+import { VOCABULARY_FILTER_PROPERTIES } from '../../interfaces';
+import { hasActiveFilterDefinition, summarizeFilterDefinition } from '../../shared/filter-dialog';
+
+const BASE_DISPLAYED_COLUMNS = ['select', 'id', 'enword', 'cnword'];
+const RATED_DISPLAYED_COLUMNS = [...BASE_DISPLAYED_COLUMNS, 'rating'];
+
+/** Character cap for the Filter menu's dynamic summary (ellipsis appended). */
+const FILTER_MENU_MAX_LENGTH = 40;
 
 /**
  * List screen of the vocabulary exercises page: toolbar (file selector, select
@@ -79,11 +87,10 @@ export class VocabularyExercisesWordListComponent implements OnInit {
   readonly selection = input.required<SelectionModel<LearnEnglishWordFileItem>>();
   readonly contentRatings = input.required<Map<number, number>>();
   /**
-   * Whether the rating column is editable. Temp content (negative
+   * Whether ratings apply to the loaded file. Temp uploads (negative
    * `studyContentId`) cannot persist ratings — the container refuses the call,
-   * but the toggle group must also be disabled so it cannot latch a phantom
-   * value the `[ngModel]` binding would never reset (same writeValue-skip
-   * mechanism as M2). Defaults to enabled for legacy callers.
+   * so the rating column is hidden entirely: no stored value is displayed and
+   * no toggle can latch a phantom value. Defaults to enabled for legacy callers.
    */
   readonly ratingsEnabled = input(true);
 
@@ -103,11 +110,10 @@ export class VocabularyExercisesWordListComponent implements OnInit {
   readonly quiz = output<void>();
 
   // ── Filter bar ──────────────────────────────────────────────────
-  // The container owns the applied word/rating conditions (it opens the
-  // dialogs); this child only renders them for the menu labels and forwards
+  // The container owns the applied condition definition (it opens the shared
+  // filter dialog); this child only renders it for the menu labels and forwards
   // intents. freeText is a local field for the input box, emitted live.
-  readonly wordConditions = input.required<WordCondition[]>();
-  readonly ratingConditions = input.required<RatingCondition[]>();
+  readonly filterDefinition = input.required<IFilterDefinition>();
   /**
    * Free text currently applied by the container. The container's filter
    * survives the @switch destroy/recreate of this screen (e.g. returning from
@@ -116,60 +122,60 @@ export class VocabularyExercisesWordListComponent implements OnInit {
    */
   readonly appliedFreeText = input('');
   readonly freeTextChanged = output<string>();
-  readonly defineWordFilter = output<void>();
-  readonly clearWordFilter = output<void>();
-  readonly defineRatingFilter = output<void>();
-  readonly clearRatingFilter = output<void>();
+  readonly defineFilter = output<void>();
+  readonly clearFilter = output<void>();
   readonly quickSelect = output<'random' | 'sequence' | 'words'>();
   readonly clearSelection = output<void>();
 
-  displayedColumns: string[] = ['select', 'id', 'enword', 'cnword', 'rating'];
+  /** Stable identities so mat-table's column defs only re-diff on a real flip. */
+  get displayedColumns(): string[] {
+    return this.ratingsEnabled() ? RATED_DISPLAYED_COLUMNS : BASE_DISPLAYED_COLUMNS;
+  }
 
   freeText = '';
 
   private readonly transloco = inject(TranslocoService);
 
-  private readonly wordOpLabelKeys: Record<WordMatchOperator, string> = {
-    startsWith: 'wordOpStartsWith',
-    contains: 'wordOpContains',
-    equal: 'wordOpEqual',
-    endsWith: 'wordOpEndsWith',
-    isPhrase: 'wordOpIsPhrase',
-    notPhrase: 'wordOpNotPhrase',
-  };
-
-  private readonly ratingOpSymbols: Record<number, string> = {
-    [RatingOperatorEnum.LargerOrEquals]: '>=',
-    [RatingOperatorEnum.GreaterThan]: '>',
-    [RatingOperatorEnum.Equals]: '=',
-    [RatingOperatorEnum.LessOrEquals]: '<=',
-    [RatingOperatorEnum.LessThan]: '<',
-  };
-
-  /** Free text applies live. */
-  onFreeTextChanged(): void {
-    this.freeTextChanged.emit(this.freeText);
+  /**
+   * True while an IME composition is in progress. Intermediate pinyin
+   * fragments fire `input` events; filtering those would flicker the table
+   * mid-word (free text matches the Chinese gloss too), so they are
+   * suppressed until compositionend delivers the final text.
+   */
+  private composing = false;
+
+  /** Free text applies live, except mid-composition. */
+  onFreeTextChanged(value: string): void {
+    if (this.composing) {
+      return;
+    }
+    this.freeTextChanged.emit(value);
   }
 
-  get hasWordFilter(): boolean {
-    return this.wordConditions().some(isWordConditionActive);
+  onCompositionStart(): void {
+    this.composing = true;
   }
 
-  get wordMenuLabel(): string {
-    return this.hasWordFilter
-      ? summarizeWordFilter(this.wordConditions(), op =>
-          this.transloco.translate('vocabularyExercises.' + this.wordOpLabelKeys[op]))
-      : this.transloco.translate('vocabularyExercises.filterNew');
+  onCompositionEnd(value: string): void {
+    this.composing = false;
+    this.freeTextChanged.emit(value);
   }
 
-  get hasRatingFilter(): boolean {
-    return this.ratingConditions().length > 0;
+  get hasFilter(): boolean {
+    return hasActiveFilterDefinition(this.filterDefinition());
   }
 
-  get ratingMenuLabel(): string {
-    return this.hasRatingFilter
-      ? summarizeRatingFilter(this.ratingConditions(), op => this.ratingOpSymbols[op] ?? '?')
-      : this.transloco.translate('vocabularyExercises.filterNew');
+  /** Condition-definition summary (join words and parentheses included) for the Filter menu item. */
+  get filterMenuLabel(): string {
+    if (!this.hasFilter) {
+      return this.transloco.translate('common.filterNew');
+    }
+    return summarizeFilterDefinition(
+      this.filterDefinition(),
+      VOCABULARY_FILTER_PROPERTIES,
+      { translate: key => this.transloco.translate(key) },
+      FILTER_MENU_MAX_LENGTH
+    );
   }
 
   private readonly destroyRef = inject(DestroyRef);
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises-worksheetoptions-dialog.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises-worksheetoptions-dialog.html
index 3cf850f..4b0c88f 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises-worksheetoptions-dialog.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises-worksheetoptions-dialog.html
@@ -7,7 +7,7 @@ <h2 mat-dialog-title>{{ t('vocabularyExercises.optionsOfPrinting') }}</h2>
       <span matSuffix>{{data.wordQueueCount}}</span>
     </mat-form-field>
     <mat-form-field class="control-full-width">
-      <mat-label>{{ t('vocabularyExercises.subTitle') }}</mat-label>
+      <mat-label>{{ t('common.subTitle') }}</mat-label>
       <input matInput type="text" [(ngModel)]="subTitle">
     </mat-form-field>
     <div class="control-full-width">
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.html b/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.html
index 8b9d08d..c7f5b14 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.html
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.html
@@ -47,18 +47,15 @@
           [selection]="selection"
           [contentRatings]="contentRatingMap()"
           [ratingsEnabled]="studyContentId > 0"
-          [wordConditions]="wordConditions()"
-          [ratingConditions]="ratingConditions()"
+          [filterDefinition]="filterDefinition()"
           [appliedFreeText]="freeText()"
           (downloadTemplate)="onDownloadTemplateButtonClick()"
           (addFileClick)="onAddFileButtonClick($event)"
           (tempFileSelected)="onAddTempFile($event)"
           (fileSelectionChanged)="onFileSelectionChanged($event)"
           (freeTextChanged)="onFreeTextChanged($event)"
-          (defineWordFilter)="onDefineWordFilter()"
-          (clearWordFilter)="onClearWordFilter()"
-          (defineRatingFilter)="onDefineRatingFilter()"
-          (clearRatingFilter)="onClearRatingFilter()"
+          (defineFilter)="onDefineFilter()"
+          (clearFilter)="onClearFilter()"
           (quickSelect)="onQuickSelect($event)"
           (clearSelection)="onClearSelection()"
           (allRowsToggled)="toggleAllRows()"
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.spec.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.spec.ts
index 3e0b1b7..18bb845 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.spec.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.spec.ts
@@ -1,6 +1,7 @@
 import type { ComponentFixture } from '@angular/core/testing';
 import { TestBed } from '@angular/core/testing';
 import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { Router } from '@angular/router';
@@ -10,11 +11,17 @@ import {
   TRANSLOCO_TRANSPILER,
   TRANSLOCO_MISSING_HANDLER,
 } from '@jsverse/transloco';
+import { FilterJoinType, FilterOperation } from 'actslib';
+import type { IFilterCondition, IFilterDefinition } from 'actslib';
 import { of, Subject, throwError } from 'rxjs';
 import { vi } from 'vitest';
 
-import type { LearningContent, LearnEnglishWordFileItem, UserLearningRating } from '../../interfaces';
-import { RatingOperatorEnum, SelectionModeEnum } from '../../interfaces';
+import type {
+  LearningContent,
+  LearnEnglishWordFileItem,
+  UserLearningRating,
+} from '../../interfaces';
+import { SelectionModeEnum, VOCABULARY_IS_PHRASE, VOCABULARY_UPLOAD_MAX_ITEMS } from '../../interfaces';
 import { AudioService, UIService, LearningContentService, LearningRatingService } from '../../services';
 import { AppPageTitle } from '../page-title/page-title';
 
@@ -70,6 +77,7 @@ describe('VocabularyExercisesComponent', () => {
   let mockDialog: any;
   let mockPageTitle: AppPageTitle;
   let mockRatingService: any;
+  let mockSnackBar: { open: ReturnType<typeof vi.fn> };
 
   beforeEach(async () => {
     mockLearningContentService = {
@@ -77,7 +85,13 @@ describe('VocabularyExercisesComponent', () => {
       getVocabularyWordContent: vi.fn(),
       addTemporaryContent: vi.fn(),
     };
-    mockAudioService = { playSound: vi.fn(), stopSound: vi.fn(), speakWord: vi.fn() };
+    mockAudioService = {
+      playSound: vi.fn(),
+      stopSound: vi.fn(),
+      speakWord: vi.fn(),
+      playAuthenticatedOneShot: vi.fn().mockResolvedValue(true),
+    };
+    mockSnackBar = { open: vi.fn() };
     mockUIService = { setSelectedExerciseItem: vi.fn() };
     mockRouter = { navigate: vi.fn() };
     mockDialog = { open: vi.fn() };
@@ -98,6 +112,7 @@ describe('VocabularyExercisesComponent', () => {
         { provide: UIService, useValue: mockUIService },
         { provide: Router, useValue: mockRouter },
         { provide: MatDialog, useValue: mockDialog },
+        { provide: MatSnackBar, useValue: mockSnackBar },
         { provide: AppPageTitle, useValue: mockPageTitle },
         { provide: LearningRatingService, useValue: mockRatingService },
         { provide: TranslocoService, useValue: createMockTranslocoService() },
@@ -150,11 +165,25 @@ describe('VocabularyExercisesComponent', () => {
 
   // The filter bar's structured criteria travel through dataSource.filter as
   // JSON; tests go through applyListFilter rather than assigning raw strings.
+  // cond/andG/orG build the actslib definition the filter now carries. Values
+  // are pre-folded (lower-case) as the dialog's prepareValue hooks emit them.
+  const cond = (
+    property: string,
+    operation: FilterOperation,
+    lowValue: string | number
+  ): IFilterCondition => ({ property, operation, lowValue });
+  const andG = (...conditions: Array<IFilterCondition | IFilterDefinition>): IFilterDefinition => ({
+    join: FilterJoinType.AND,
+    conditions,
+  });
+  const orG = (...conditions: Array<IFilterCondition | IFilterDefinition>): IFilterDefinition => ({
+    join: FilterJoinType.OR,
+    conditions,
+  });
   const applyFreeText = (text: string) =>
     component.applyListFilter({
       freeText: text,
-      wordConditions: [],
-      ratingConditions: [],
+      root: andG(),
     });
 
   describe('applyListFilter', () => {
@@ -171,11 +200,54 @@ describe('VocabularyExercisesComponent', () => {
     it('should clear the filter string when all criteria are empty', () => {
       component.dataSource.data = mockWordContent;
 
-      component.applyListFilter({ freeText: '', wordConditions: [], ratingConditions: [] });
+      component.applyListFilter({ freeText: '', root: andG() });
 
       expect(component.dataSource.filter).toBe('');
     });
 
+    it('should apply nested OR groups end-to-end through the data source', () => {
+      const ratedWords: LearnEnglishWordFileItem[] = [
+        { id: 1, enword: 'apple', cnword: '苹果' },
+        { id: 2, enword: 'banana', cnword: '香蕉' },
+        { id: 3, enword: 'cherry', cnword: '樱桃' },
+      ];
+      component.dataSource.data = ratedWords;
+      component.contentRatingMap.set(new Map([[3, 5]]));
+
+      component.applyListFilter({
+        freeText: '',
+        root: orG(
+          cond('enword', FilterOperation.BeginsWith, 'app'),
+          cond('rating', FilterOperation.Equal, 5)
+        ),
+      });
+
+      // Word branch hits apple, rating branch hits cherry; banana matches neither.
+      expect(component.dataSource.filteredData.map(w => w.enword)).toEqual(['apple', 'cherry']);
+    });
+
+    it('should AND free text with an OR condition tree end-to-end', () => {
+      const ratedWords: LearnEnglishWordFileItem[] = [
+        { id: 1, enword: 'apple', cnword: '苹果' },
+        { id: 2, enword: 'banana', cnword: '香蕉' },
+        { id: 3, enword: 'apple pie', cnword: '苹果派' },
+      ];
+      component.dataSource.data = ratedWords;
+      component.contentRatingMap.set(new Map([[1, 5]]));
+
+      component.applyListFilter({
+        freeText: 'pie',
+        root: orG(
+          cond('rating', FilterOperation.Equal, 5),
+          VOCABULARY_IS_PHRASE.emit('enword')
+        ),
+      });
+
+      // The OR tree would hit apple (rating 5) and apple pie (phrase), but the
+      // free text narrows it to 'apple pie' alone.
+      expect(component.dataSource.filteredData.map(w => w.enword)).toEqual(['apple pie']);
+    });
+
     it('should AND the word and rating conditions with the free text', () => {
       const ratedWords: LearnEnglishWordFileItem[] = [
         { id: 1, enword: 'apple', cnword: '苹果' },
@@ -191,15 +263,17 @@ describe('VocabularyExercisesComponent', () => {
 
       component.applyListFilter({
         freeText: '',
-        wordConditions: [{ operator: 'startsWith', text: 'app' }],
-        ratingConditions: [{ operator: RatingOperatorEnum.LargerOrEquals, value: 5 }],
+        root: andG(
+          cond('enword', FilterOperation.BeginsWith, 'app'),
+          cond('rating', FilterOperation.GreaterOrEqual, 5)
+        ),
       });
 
       expect(component.dataSource.filteredData.length).toBe(1);
       expect(component.dataSource.filteredData[0].enword).toBe('apple');
     });
 
-    it('should filter phrases in/out via the textless phrase operators', () => {
+    it('should filter phrases via the textless isPhrase operator', () => {
       const words: LearnEnglishWordFileItem[] = [
         { id: 1, enword: 'apple', cnword: '苹果' },
         { id: 2, enword: 'give up', cnword: '放弃' },
@@ -208,19 +282,10 @@ describe('VocabularyExercisesComponent', () => {
 
       component.applyListFilter({
         freeText: '',
-        wordConditions: [{ operator: 'isPhrase', text: '' }],
-        ratingConditions: [],
+        root: andG(VOCABULARY_IS_PHRASE.emit('enword')),
       });
       expect(component.dataSource.filteredData.length).toBe(1);
       expect(component.dataSource.filteredData[0].enword).toBe('give up');
-
-      component.applyListFilter({
-        freeText: '',
-        wordConditions: [{ operator: 'notPhrase', text: '' }],
-        ratingConditions: [],
-      });
-      expect(component.dataSource.filteredData.length).toBe(1);
-      expect(component.dataSource.filteredData[0].enword).toBe('apple');
     });
 
     it('should re-run an active rating filter when a rating change makes a row match', () => {
@@ -236,8 +301,7 @@ describe('VocabularyExercisesComponent', () => {
       );
       component.applyListFilter({
         freeText: '',
-        wordConditions: [],
-        ratingConditions: [{ operator: RatingOperatorEnum.Equals, value: 5 }],
+        root: andG(cond('rating', FilterOperation.Equal, 5)),
       });
       expect(component.dataSource.filteredData.length).toBe(1);
 
@@ -256,41 +320,50 @@ describe('VocabularyExercisesComponent', () => {
       expect(component.dataSource.filteredData.length).toBe(1);
     });
 
-    it('onDefineWordFilter applies the dialog result to the table filter', () => {
+    it('onDefineFilter applies the shared dialog result (an actslib definition) to the table filter', () => {
       component.dataSource.data = mockWordContent;
       mockDialog.open.mockReturnValue({
-        afterClosed: () => of([{ operator: 'startsWith', text: 'hello' }]),
-      });
-      component.onDefineWordFilter();
-      expect(component.dataSource.filter).toContain('startsWith');
-      expect(component.dataSource.filter).toContain('"text":"hello"');
-      expect(component.wordConditions()).toEqual([{ operator: 'startsWith', text: 'hello' }]);
-    });
-
-    it('onDefineWordFilter with a cancelled dialog leaves the filter untouched', () => {
-      component.wordConditions.set([{ operator: 'contains', text: 'x' }]);
-      component.applyListFilter({
-        freeText: '',
-        wordConditions: component.wordConditions(),
-        ratingConditions: [],
+        afterClosed: () => of({
+          root: andG(
+            cond('enword', FilterOperation.BeginsWith, 'hello'),
+            cond('rating', FilterOperation.Equal, 4)
+          ),
+        }),
       });
+      component.onDefineFilter();
+      expect(component.dataSource.filter).toContain('BeginsWith');
+      expect(component.dataSource.filter).toContain('"lowValue":"hello"');
+      expect(component.filterDefinition().conditions).toEqual([
+        cond('enword', FilterOperation.BeginsWith, 'hello'),
+        cond('rating', FilterOperation.Equal, 4),
+      ]);
+    });
+
+    it('onDefineFilter with a cancelled dialog leaves the filter untouched', () => {
+      const tree = andG(cond('cnword', FilterOperation.Contains, 'x'));
+      component.filterDefinition.set(tree);
+      component.applyListFilter({ freeText: '', root: tree });
       const before = component.dataSource.filter;
       mockDialog.open.mockReturnValue({ afterClosed: () => of(undefined) });
-      component.onDefineWordFilter();
-      expect(component.wordConditions()).toEqual([{ operator: 'contains', text: 'x' }]);
+      component.onDefineFilter();
+      expect(component.filterDefinition()).toBe(tree);
       expect(component.dataSource.filter).toBe(before);
     });
 
-    it('onClearWordFilter empties the word conditions', () => {
-      component.wordConditions.set([{ operator: 'contains', text: 'x' }]);
-      component.onClearWordFilter();
-      expect(component.wordConditions()).toEqual([]);
-    });
-
-    it('onClearRatingFilter empties the rating conditions', () => {
-      component.ratingConditions.set([{ operator: RatingOperatorEnum.Equals, value: 3 }]);
-      component.onClearRatingFilter();
-      expect(component.ratingConditions()).toEqual([]);
+    it('onClearFilter empties the condition tree and the table filter', () => {
+      component.filterDefinition.set(
+        orG(
+          cond('enword', FilterOperation.Contains, 'x'),
+          cond('rating', FilterOperation.Equal, 3)
+        )
+      );
+      component.applyListFilter({
+        freeText: '',
+        root: component.filterDefinition(),
+      });
+      component.onClearFilter();
+      expect(component.filterDefinition()).toEqual({ join: FilterJoinType.AND, conditions: [] });
+      expect(component.dataSource.filter).toBe('');
     });
   });
 
@@ -513,8 +586,7 @@ describe('VocabularyExercisesComponent', () => {
       );
       component.applyListFilter({
         freeText: '',
-        wordConditions: [],
-        ratingConditions: [{ operator: RatingOperatorEnum.LargerOrEquals, value: 5 }],
+        root: andG(cond('rating', FilterOperation.GreaterOrEqual, 5)),
       });
 
       component.onFileSelectionChanged({ value: mockDataFiles[0] } as any);
@@ -597,11 +669,15 @@ describe('VocabularyExercisesComponent', () => {
     interface MockReader {
       readAsText: ReturnType<typeof vi.fn>;
       onload: ((ev: { target: unknown }) => void) | null;
+      onerror: (() => void) | null;
+      onabort: (() => void) | null;
       result: string;
     }
     const createdReaders: MockReader[] = [];
     class MockFileReader {
       onload: ((ev: { target: unknown }) => void) | null = null;
+      onerror: (() => void) | null = null;
+      onabort: (() => void) | null = null;
       result = '';
       readAsText = vi.fn();
       constructor() {
@@ -645,6 +721,32 @@ describe('VocabularyExercisesComponent', () => {
         expect(component.dataSource.data.length).toBe(1);
         expect(component.dataSource.data[0].enword).toBe('test');
         expect(component.dataSource.data[0].cnword).toBe('测试');
+        // Clean import: no snackbar notice.
+        expect(mockSnackBar.open).not.toHaveBeenCalled();
+      } finally {
+        fileReaderSpy.mockRestore();
+      }
+    });
+
+    it('strips a leading UTF-8 BOM before parsing', () => {
+      const mockFile = new File(['\uFEFF[{"enword":"test","cnword":"测试"}]'], 'bom.json', {
+        type: 'application/json',
+      });
+      const mockEvent = { target: { files: [mockFile] } } as any;
+      const fileReaderSpy = installFileReaderMock();
+
+      try {
+        component.onAddTempFile(mockEvent);
+
+        const reader = createdReaders[0];
+        reader.result = '\uFEFF[{"enword":"test","cnword":"测试"}]';
+        reader.onload?.({ target: reader });
+
+        expect(mockLearningContentService.addTemporaryContent).toHaveBeenCalledWith(
+          expect.any(String),
+          [{ enword: 'test', cnword: '测试' }]
+        );
+        expect(mockSnackBar.open).not.toHaveBeenCalled();
       } finally {
         fileReaderSpy.mockRestore();
       }
@@ -658,14 +760,13 @@ describe('VocabularyExercisesComponent', () => {
       expect(mockLearningContentService.addTemporaryContent).not.toHaveBeenCalled();
     });
 
-    it('should handle JSON parsing error', () => {
+    it('reports a parse failure via snackbar', () => {
       const mockFile = new File(['invalid json'], 'test.json', {
         type: 'application/json',
       });
       const mockEvent = { target: { files: [mockFile] } } as any;
 
       const fileReaderSpy = installFileReaderMock();
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
       try {
         component.onAddTempFile(mockEvent);
@@ -674,10 +775,60 @@ describe('VocabularyExercisesComponent', () => {
         reader.result = 'invalid json';
         reader.onload?.({ target: reader });
 
-        expect(consoleSpy).toHaveBeenCalledWith('Error parsing JSON file:', expect.any(Error));
+        expect(mockSnackBar.open).toHaveBeenCalledWith(
+          'vocabularyExercises.uploadErrParse',
+          'close',
+          expect.anything()
+        );
+        expect(mockLearningContentService.addTemporaryContent).not.toHaveBeenCalled();
+        expect(component.dataSource.data.length).toBe(0);
+      } finally {
+        fileReaderSpy.mockRestore();
+      }
+    });
+
+    it('reports UTF-16 content with a targeted message', () => {
+      const mockFile = new File(['nul bytes'], 'utf16.json', { type: 'application/json' });
+      const mockEvent = { target: { files: [mockFile] } } as any;
+      const fileReaderSpy = installFileReaderMock();
+
+      try {
+        component.onAddTempFile(mockEvent);
+
+        const reader = createdReaders[0];
+        reader.result =
+          String.fromCharCode(0xff, 0xfe) + '[' + String.fromCharCode(0) + ']';
+        reader.onload?.({ target: reader });
+
+        expect(mockSnackBar.open).toHaveBeenCalledWith(
+          'vocabularyExercises.uploadErrUtf16',
+          'close',
+          expect.anything()
+        );
+      } finally {
+        fileReaderSpy.mockRestore();
+      }
+    });
+
+    it('reports non-array JSON payloads', () => {
+      const mockFile = new File(['{}'], 'obj.json', { type: 'application/json' });
+      const mockEvent = { target: { files: [mockFile] } } as any;
+      const fileReaderSpy = installFileReaderMock();
+
+      try {
+        component.onAddTempFile(mockEvent);
+
+        const reader = createdReaders[0];
+        reader.result = '{"enword":"test","cnword":"测试"}';
+        reader.onload?.({ target: reader });
+
+        expect(mockSnackBar.open).toHaveBeenCalledWith(
+          'vocabularyExercises.uploadErrNotArray',
+          'close',
+          expect.anything()
+        );
       } finally {
         fileReaderSpy.mockRestore();
-        consoleSpy.mockRestore();
       }
     });
 
@@ -700,14 +851,13 @@ describe('VocabularyExercisesComponent', () => {
       }
     });
 
-    it('should reject files containing one-character enwords (service contract)', () => {
+    it('reports an empty result when no row survives validation', () => {
       const mockFile = new File(['[{"enword":"a","cnword":"测试"}]'], 'test.json', {
         type: 'application/json',
       });
       const mockEvent = { target: { files: [mockFile] } } as any;
 
       const fileReaderSpy = installFileReaderMock();
-      const consoleSpy = vi.spyOn(console, 'error').mockImplementation(() => {});
 
       try {
         component.onAddTempFile(mockEvent);
@@ -716,14 +866,97 @@ describe('VocabularyExercisesComponent', () => {
         reader.result = '[{"enword":"a","cnword":"测试"}]';
         reader.onload?.({ target: reader });
 
+        // The one-character row is skipped; nothing remains to import.
         expect(mockLearningContentService.addTemporaryContent).not.toHaveBeenCalled();
         expect(component.dataSource.data.length).toBe(0);
-        expect(consoleSpy).toHaveBeenCalledWith(
-          'Invalid word length: "enword" must be longer than one character.'
+        expect(mockSnackBar.open).toHaveBeenCalledWith(
+          'vocabularyExercises.uploadErrEmpty',
+          'close',
+          expect.anything()
+        );
+      } finally {
+        fileReaderSpy.mockRestore();
+      }
+    });
+
+    it('skips invalid rows and imports the rest, warning with the skipped count', () => {
+      const payload =
+        '[{"enword":"good","cnword":"好"},{"other":1},{"enword":"a","cnword":"坏"},{"enword":"also","cnword":"也"}]';
+      const mockFile = new File([payload], 'mixed.json', { type: 'application/json' });
+      const mockEvent = { target: { files: [mockFile] } } as any;
+      const fileReaderSpy = installFileReaderMock();
+
+      try {
+        component.onAddTempFile(mockEvent);
+
+        const reader = createdReaders[0];
+        reader.result = payload;
+        reader.onload?.({ target: reader });
+
+        expect(mockLearningContentService.addTemporaryContent).toHaveBeenCalledWith(expect.any(String), [
+          { enword: 'good', cnword: '好' },
+          { enword: 'also', cnword: '也' },
+        ]);
+        expect(component.dataSource.data.length).toBe(2);
+        expect(mockSnackBar.open).toHaveBeenCalledTimes(1);
+        expect(mockSnackBar.open).toHaveBeenCalledWith(
+          'vocabularyExercises.uploadWarnSkipped',
+          'close',
+          expect.anything()
+        );
+      } finally {
+        fileReaderSpy.mockRestore();
+      }
+    });
+
+    it('warns when an oversized file is truncated at the cap', () => {
+      const rows: LearnEnglishWordFileItem[] = [];
+      for (let i = 0; i < VOCABULARY_UPLOAD_MAX_ITEMS + 3; i++) {
+        rows.push({ enword: `w${i}`, cnword: `词${i}` });
+      }
+      const mockFile = new File(['[]'], 'big.json', { type: 'application/json' });
+      const mockEvent = { target: { files: [mockFile] } } as any;
+      const fileReaderSpy = installFileReaderMock();
+
+      try {
+        component.onAddTempFile(mockEvent);
+
+        const reader = createdReaders[0];
+        reader.result = JSON.stringify(rows);
+        reader.onload?.({ target: reader });
+
+        expect(component.dataSource.data.length).toBe(VOCABULARY_UPLOAD_MAX_ITEMS);
+        expect(mockSnackBar.open).toHaveBeenCalledWith(
+          'vocabularyExercises.uploadWarnTruncated',
+          'close',
+          expect.anything()
         );
       } finally {
         fileReaderSpy.mockRestore();
-        consoleSpy.mockRestore();
+      }
+    });
+
+    it('reports reader failures via onerror instead of failing silently', () => {
+      const mockFile = new File(['[{"enword":"test","cnword":"测试"}]'], 'test.json', {
+        type: 'application/json',
+      });
+      const mockEvent = { target: { files: [mockFile] } } as any;
+      const fileReaderSpy = installFileReaderMock();
+
+      try {
+        component.onAddTempFile(mockEvent);
+
+        const reader = createdReaders[0];
+        reader.onerror?.();
+
+        expect(mockSnackBar.open).toHaveBeenCalledWith(
+          'vocabularyExercises.uploadErrRead',
+          'close',
+          expect.anything()
+        );
+        expect(mockLearningContentService.addTemporaryContent).not.toHaveBeenCalled();
+      } finally {
+        fileReaderSpy.mockRestore();
       }
     });
 
@@ -753,6 +986,47 @@ describe('VocabularyExercisesComponent', () => {
         fileReaderSpy.mockRestore();
       }
     });
+
+    it('hides the rating column while a temporary file is loaded, restores it for real files', () => {
+      // Temp uploads cannot persist ratings (negative studyContentId), so the
+      // rating column must disappear — no values shown, nothing clickable.
+      // The mock TranslocoService returns the key verbatim, so the header
+      // cell text is exactly 'rating'. (nativeElement is untyped here: pass
+      // an explicit element type to the mapper rather than a selector generic.)
+      const ratingHeaderCellCount = (): number =>
+        Array.from(
+          fixture.nativeElement.querySelectorAll('th'),
+          (th: Element) => th.textContent?.trim() ?? ''
+        ).filter(text => text === 'rating').length;
+
+      component.onFileSelectionChanged({ value: mockDataFiles[0] } as any);
+      fixture.detectChanges();
+      expect(ratingHeaderCellCount()).toBe(1);
+
+      const mockFile = new File(['[{"enword":"test","cnword":"测试"}]'], 'temp.json', {
+        type: 'application/json',
+      });
+      const mockEvent = { target: { files: [mockFile] } } as any;
+      const fileReaderSpy = installFileReaderMock();
+
+      try {
+        component.onAddTempFile(mockEvent);
+        const reader = createdReaders[0];
+        reader.result = '[{"enword":"test","cnword":"测试"}]';
+        reader.onload?.({ target: reader });
+        fixture.detectChanges();
+
+        expect(ratingHeaderCellCount()).toBe(0);
+        expect(fixture.nativeElement.querySelector('mat-button-toggle')).toBeNull();
+      } finally {
+        fileReaderSpy.mockRestore();
+      }
+
+      // Selecting a persisted file brings the column back.
+      component.onFileSelectionChanged({ value: mockDataFiles[1] } as any);
+      fixture.detectChanges();
+      expect(ratingHeaderCellCount()).toBe(1);
+    });
   });
 
   describe('selection methods', () => {
@@ -969,8 +1243,7 @@ describe('VocabularyExercisesComponent', () => {
       component.studyContentId = 0;
       component.applyListFilter({
         freeText: 'zzz-not-found',
-        wordConditions: [],
-        ratingConditions: [],
+        root: andG(),
       });
 
       expect(() => component['onReviewCore']()).not.toThrow();
@@ -1021,8 +1294,7 @@ describe('VocabularyExercisesComponent', () => {
       component.contentRatingMap.set(new Map([[10, 4]]));
       component.applyListFilter({
         freeText: '',
-        wordConditions: [],
-        ratingConditions: [{ operator: RatingOperatorEnum.LargerOrEquals, value: 3 }],
+        root: andG(cond('rating', FilterOperation.GreaterOrEqual, 3)),
       });
       // Only item 10 (rating 4) passes the filter.
       expect(component.dataSource.filteredData.length).toBe(1);
@@ -2553,10 +2825,10 @@ describe('VocabularySelectDialogComponent', () => {
   it('titleKey returns the correct key per mode', async () => {
     const component = await createComponent(SelectionModeEnum.ByCount);
     component.data.mode = SelectionModeEnum.ByCount;
-    expect(component.titleKey).toBe('vocabularyExercises.sequenceSelect');
+    expect(component.titleKey).toBe('common.sequenceSelect');
     component.data.mode = SelectionModeEnum.ByID;
     expect(component.titleKey).toBe('vocabularyExercises.selectWords');
     component.data.mode = SelectionModeEnum.FreeSelection;
-    expect(component.titleKey).toBe('vocabularyExercises.randomSelect');
+    expect(component.titleKey).toBe('common.randomSelect');
   });
 });
diff --git a/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.ts b/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.ts
index fb453dc..ec32ee9 100644
--- a/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.ts
+++ b/src/app/pages/vocabulary-exercises/vocabulary-exercises.component.ts
@@ -12,8 +12,11 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import type { MatButtonToggleChange } from '@angular/material/button-toggle';
 import { MatDialog } from '@angular/material/dialog';
 import type { MatSelectChange } from '@angular/material/select';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { MatTableDataSource } from '@angular/material/table';
 import { Router } from '@angular/router';
+import { TranslocoService } from '@jsverse/transloco';
+import { FisherYatesShuffle, type IFilterDefinition } from 'actslib';
 
 import type {
   LearnEnglishWordFileItem,
@@ -30,30 +33,33 @@ import type {
   KnowledgeExerciseFileContent,
   KnowledgeExercisePrintOption,
   VocabularyListFilter,
-  WordCondition,
-  RatingCondition,
+  VocabularyUploadFailureReason,
 } from '../../interfaces';
 import {
   QuestionBankTypeEnum,
   SelectionModeEnum,
+  VOCABULARY_FILTER_PROPERTIES,
+  VOCABULARY_UPLOAD_MAX_ITEMS,
   buildVocabularyQuizQuestions,
+  emptyVocabularyFilterDefinition,
   isVocabularyListFilterEmpty,
   matchVocabularyListFilter,
+  parseVocabularyUpload,
 } from '../../interfaces';
 import { LearningContentService, LearningRatingService, UIService } from '../../services';
+import type { FilterDialogData, FilterDialogResult } from '../../shared/filter-dialog/filter-dialog-model';
+import { SharedFilterDialogComponent } from '../../shared/filter-dialog/filter-dialog.component';
 import { FooterComponent } from '../../shared/footer/footer';
-import { fisherYatesShuffle } from '../../shared/utils/shuffle';
 import { AppPageTitle } from '../page-title/page-title';
 
+import { VocabularyExercisesDictationResultComponent } from './vocabulary-exercises-dictation-result.component';
+import { VocabularyExercisesDictationSessionComponent } from './vocabulary-exercises-dictation-session.component';
+import { VocabularyDictationSessionStore } from './vocabulary-exercises-dictation-session.store';
+import { VocabularyExercisesDictationOptionsDialogComponent } from './vocabulary-exercises-dictationoptions-dialog.component';
 import { VocabularyExercisesQuizResultComponent } from './vocabulary-exercises-quiz-result.component';
 import { VocabularyExercisesQuizSessionComponent } from './vocabulary-exercises-quiz-session.component';
 import { VocabularyQuizSessionStore } from './vocabulary-exercises-quiz-session.store';
 import { VocabularyExercisesQuizOptionsDialogComponent } from './vocabulary-exercises-quizoptions-dialog.component';
-import { VocabularyExercisesDictationOptionsDialogComponent } from './vocabulary-exercises-dictationoptions-dialog.component';
-import { VocabularyExercisesDictationResultComponent } from './vocabulary-exercises-dictation-result.component';
-import { VocabularyExercisesDictationSessionComponent } from './vocabulary-exercises-dictation-session.component';
-import { VocabularyDictationSessionStore } from './vocabulary-exercises-dictation-session.store';
-import { VocabularyExercisesRatingFilterDialogComponent } from './vocabulary-exercises-rating-filter-dialog.component';
 import { VocabularyExercisesReviewSessionComponent } from './vocabulary-exercises-review-session.component';
 import { VocabularyReviewSessionStore } from './vocabulary-exercises-review-session.store';
 import { VocabularyExercisesReviewOptionsDialogComponent } from './vocabulary-exercises-reviewoptions-dialog.component';
@@ -62,13 +68,19 @@ import { VocabularyExercisesSpellingResultComponent } from './vocabulary-exercis
 import { VocabularyExercisesSpellingSessionComponent } from './vocabulary-exercises-spelling-session.component';
 import { VocabularySpellingSessionStore } from './vocabulary-exercises-spelling-session.store';
 import { VocabularyExercisesSpellingOptionsDialogComponent } from './vocabulary-exercises-spellingoptions-dialog.component';
-import { VocabularyExercisesWordFilterDialogComponent } from './vocabulary-exercises-word-filter-dialog.component';
 import { VocabularyExercisesWordListComponent } from './vocabulary-exercises-word-list.component';
 import { VocabularyExercisesWorksheetOptionsDialogComponent } from './vocabulary-exercises-worksheetoptions-dialog.component';
 
 /** The screens of the vocabulary exercises page, switched via @switch in the template. */
 export type VocabularyExercisesMode = 'list' | 'review' | 'spelling' | 'spellingresult' | 'dictation' | 'dictationresult' | 'quiz' | 'quizresult';
 
+/** i18n key per hard upload failure surfaced by onAddTempFile. */
+const UPLOAD_FAILURE_KEYS: Record<VocabularyUploadFailureReason, string> = {
+  utf16: 'vocabularyExercises.uploadErrUtf16',
+  parse: 'vocabularyExercises.uploadErrParse',
+  'not-array': 'vocabularyExercises.uploadErrNotArray',
+};
+
 @Component({
   selector: 'app-vocabulary-exercises',
   standalone: true,
@@ -106,11 +118,10 @@ export class VocabularyExercisesComponent implements OnInit {
   // so the new reference reaches the OnPush word-list child as an input.
   contentRatingMap = signal(new Map<number, number>());
   // Filter bar: the container is the single source of truth for the applied
-  // word/rating conditions (it opens the dialogs). freeText is fed back from
-  // the child's live input via freeTextChanged.
+  // condition definition (it opens the shared filter dialog). freeText is fed
+  // back from the child's live input via freeTextChanged.
   freeText = signal('');
-  wordConditions = signal<WordCondition[]>([]);
-  ratingConditions = signal<RatingCondition[]>([]);
+  filterDefinition = signal<IFilterDefinition>(emptyVocabularyFilterDefinition());
   // Parsed form of the active list filter; applyListFilter keeps it in sync
   // with dataSource.filter so the row predicate does not JSON.parse per row.
   // Null means no filter (MatTable skips the predicate for an empty filter).
@@ -120,6 +131,8 @@ export class VocabularyExercisesComponent implements OnInit {
   // Service
   private readonly contentService = inject(LearningContentService);
   readonly dialog = inject(MatDialog);
+  private readonly snackBar = inject(MatSnackBar);
+  private readonly transloco = inject(TranslocoService);
   // Navigation
   readonly router = inject(Router);
   readonly uiService = inject(UIService);
@@ -304,50 +317,35 @@ export class VocabularyExercisesComponent implements OnInit {
     this.applyCurrentFilter();
   }
 
-  onDefineWordFilter(): void {
+  onDefineFilter(): void {
     this.dialog
-      .open(VocabularyExercisesWordFilterDialogComponent, {
-        data: this.wordConditions(),
-        width: '480px',
-        enterAnimationDuration: 800,
-        exitAnimationDuration: 500,
-      })
-      .afterClosed()
-      .pipe(takeUntilDestroyed(this.destroyRef))
-      .subscribe(result => {
-        // undefined (Cancel / backdrop / Esc) leaves the previous filter untouched.
-        if (result !== undefined) {
-          this.wordConditions.set(result);
-          this.applyCurrentFilter();
+      .open<SharedFilterDialogComponent, FilterDialogData, FilterDialogResult | undefined>(
+        SharedFilterDialogComponent,
+        {
+          data: {
+            properties: VOCABULARY_FILTER_PROPERTIES,
+            root: this.filterDefinition(),
+          },
+          // Tree navigator + detail pane sit side by side; the splitter can
+          // resize them but needs the extra width to start from.
+          width: '880px',
+          enterAnimationDuration: 800,
+          exitAnimationDuration: 500,
         }
-      });
-  }
-
-  onClearWordFilter(): void {
-    this.wordConditions.set([]);
-    this.applyCurrentFilter();
-  }
-
-  onDefineRatingFilter(): void {
-    this.dialog
-      .open(VocabularyExercisesRatingFilterDialogComponent, {
-        data: this.ratingConditions(),
-        width: '480px',
-        enterAnimationDuration: 800,
-        exitAnimationDuration: 500,
-      })
+      )
       .afterClosed()
       .pipe(takeUntilDestroyed(this.destroyRef))
       .subscribe(result => {
+        // undefined (Cancel / backdrop / Esc) leaves the previous filter untouched.
         if (result !== undefined) {
-          this.ratingConditions.set(result);
+          this.filterDefinition.set(result.root);
           this.applyCurrentFilter();
         }
       });
   }
 
-  onClearRatingFilter(): void {
-    this.ratingConditions.set([]);
+  onClearFilter(): void {
+    this.filterDefinition.set(emptyVocabularyFilterDefinition());
     this.applyCurrentFilter();
   }
 
@@ -378,8 +376,7 @@ export class VocabularyExercisesComponent implements OnInit {
   private applyCurrentFilter(): void {
     this.applyListFilter({
       freeText: this.freeText(),
-      wordConditions: this.wordConditions(),
-      ratingConditions: this.ratingConditions(),
+      root: this.filterDefinition(),
     });
   }
 
@@ -560,91 +557,87 @@ export class VocabularyExercisesComponent implements OnInit {
         if (this.isDestroyed) {
           return;
         }
-        try {
-          const fileContent = e.target!.result as string;
-          const parsed: unknown = JSON.parse(fileContent);
+        this.importUploadedWords((e.target?.result ?? '') as string);
+      };
+      reader.onerror = () => this.onUploadReadProblem();
+      reader.onabort = () => this.onUploadReadProblem();
 
-          // Validate schema: must be an array of objects with string enword/cnword
-          if (!Array.isArray(parsed)) {
-            console.error('Invalid file format: expected a JSON array.');
-            return;
-          }
+      reader.readAsText(selectedFile);
+    }
+  }
 
-          const arwords: LearnEnglishWordFileItem[] = [];
-          const MAX_ITEMS = 10000;
-          const MAX_WORD_LENGTH = 500;
+  /** Reader failed/aborted; like onload, useless after navigation (L5). */
+  private onUploadReadProblem(): void {
+    if (this.isDestroyed) {
+      return;
+    }
+    this.notifyUpload(this.transloco.translate('vocabularyExercises.uploadErrRead'));
+  }
 
-          for (const item of parsed) {
-            if (typeof item !== 'object' || item === null) {
-              console.error('Invalid file format: array items must be objects.');
-              return;
-            }
-            const obj = item as Record<string, unknown>;
-            if (typeof obj['enword'] !== 'string' || typeof obj['cnword'] !== 'string') {
-              console.error('Invalid file format: each item must have string "enword" and "cnword" properties.');
-              return;
-            }
-            // Same contract as LearningContentService's word files: words
-            // longer than one character (see docs/data-models.md).
-            if (obj['enword'].length <= 1) {
-              console.error('Invalid word length: "enword" must be longer than one character.');
-              return;
-            }
-            if (obj['enword'].length > MAX_WORD_LENGTH || obj['cnword'].length > MAX_WORD_LENGTH) {
-              console.error(`Invalid word length (max ${MAX_WORD_LENGTH} characters).`);
-              return;
-            }
-            arwords.push({ enword: obj['enword'], cnword: obj['cnword'] });
-            if (arwords.length >= MAX_ITEMS) {
-              break;
-            }
-          }
+  private notifyUpload(message: string): void {
+    this.snackBar.open(message, this.transloco.translate('close'), { duration: 5000 });
+  }
 
-          if (arwords.length === 0) {
-            console.error('No valid vocabulary items found in file.');
-            return;
-          }
+  private importUploadedWords(fileContent: string): void {
+    const result = parseVocabularyUpload(fileContent);
+    if (!result.ok) {
+      this.notifyUpload(this.transloco.translate(UPLOAD_FAILURE_KEYS[result.reason]));
+      return;
+    }
+    if (result.items.length === 0) {
+      this.notifyUpload(this.transloco.translate('vocabularyExercises.uploadErrEmpty'));
+      return;
+    }
 
-          // Generate a unique temp file URL
-          const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-          const tempFileUrl = `temp-${timestamp}.json`;
-
-          // Create a synthetic LearningContent entry for the temp file
-          const tempContent: LearningContent = {
-            id: -(Date.now()),
-            categoryId: 1,
-            nameEnglish: tempFileUrl,
-            nameChinese: '临时文件',
-            fileUrl: tempFileUrl,
-          };
-
-          // Register content in the learning content service cache
-          this.contentService.addTemporaryContent(tempFileUrl, arwords);
-
-          // Reset cross-file state, mirroring onFileSelectionChanged: stale
-          // selections from the previous file would otherwise override the
-          // freshly loaded rows in review/spelling/worksheet prep. The negative temp
-          // id keeps every `studyContentId > 0` rating guard inactive. The
-          // token bump also invalidates any in-flight load of the previous
-          // file, whose late response would otherwise overwrite these rows.
-          this.selection.clear();
-          this.studyContentId = tempContent.id;
-          this.fileLoadToken++;
-          this.contentRatingMap.set(new Map());
-          this.pendingContentRatings.clear();
-
-          // Add to file list and select it.
-          this.allFiles.update(files => [...files, tempContent]);
-          this.selectedFile.set(tempContent);
-
-          // Update data source
-          this.dataSource.data = arwords.slice();
-        } catch (error) {
-          console.error('Error parsing JSON file:', error);
-        }
-      };
+    // Generate a unique temp file URL
+    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+    const tempFileUrl = `temp-${timestamp}.json`;
+
+    // Create a synthetic LearningContent entry for the temp file
+    const tempContent: LearningContent = {
+      id: -(Date.now()),
+      categoryId: 1,
+      nameEnglish: tempFileUrl,
+      nameChinese: '临时文件',
+      fileUrl: tempFileUrl,
+    };
 
-      reader.readAsText(selectedFile);
+    // Register content in the learning content service cache
+    this.contentService.addTemporaryContent(tempFileUrl, result.items);
+
+    // Reset cross-file state, mirroring onFileSelectionChanged: stale
+    // selections from the previous file would otherwise override the
+    // freshly loaded rows in review/spelling/worksheet prep. The negative temp
+    // id keeps every `studyContentId > 0` rating guard inactive. The
+    // token bump also invalidates any in-flight load of the previous
+    // file, whose late response would otherwise overwrite these rows.
+    this.selection.clear();
+    this.studyContentId = tempContent.id;
+    this.fileLoadToken++;
+    this.contentRatingMap.set(new Map());
+    this.pendingContentRatings.clear();
+
+    // Add to file list and select it.
+    this.allFiles.update(files => [...files, tempContent]);
+    this.selectedFile.set(tempContent);
+
+    // Update data source
+    this.dataSource.data = result.items.slice();
+
+    // Partial-import warnings, shown after the imported rows are visible.
+    const warnings: string[] = [];
+    if (result.skippedCount > 0) {
+      warnings.push(
+        this.transloco.translate('vocabularyExercises.uploadWarnSkipped', { count: result.skippedCount })
+      );
+    }
+    if (result.truncated) {
+      warnings.push(
+        this.transloco.translate('vocabularyExercises.uploadWarnTruncated', { max: VOCABULARY_UPLOAD_MAX_ITEMS })
+      );
+    }
+    if (warnings.length > 0) {
+      this.notifyUpload(warnings.join(' '));
     }
   }
 
@@ -727,7 +720,7 @@ export class VocabularyExercisesComponent implements OnInit {
     let queues = items;
     if (queues.length > options.countOfItems) {
       // Randomize the array, then keep only the first `countOfItems` items
-      queues = fisherYatesShuffle(queues);
+      queues = FisherYatesShuffle(queues);
       queues = queues.slice(0, options.countOfItems);
     }
 
@@ -741,7 +734,7 @@ export class VocabularyExercisesComponent implements OnInit {
     if (this.selection.selected.length > 0) {
       sourceItems = this.selection.selected.slice();
       // Randomize the array
-      sourceItems = fisherYatesShuffle(sourceItems);
+      sourceItems = FisherYatesShuffle(sourceItems);
     } else {
       sourceItems = this.prepareWordQueue(this.getVisibleData(), this.reviewSetting);
     }
@@ -941,7 +934,7 @@ export class VocabularyExercisesComponent implements OnInit {
     if (this.selection.selected.length > 0) {
       sourceItems = this.selection.selected.slice();
       // Randomize the array
-      sourceItems = fisherYatesShuffle(sourceItems);
+      sourceItems = FisherYatesShuffle(sourceItems);
     } else {
       sourceItems = this.prepareWordQueue(visible, this.quizSetting);
     }
@@ -1006,7 +999,7 @@ export class VocabularyExercisesComponent implements OnInit {
     if (this.selection.selected.length > 0) {
       worksheetqueues = this.coverContentToQueue(this.selection.selected);
       // Randomize the array
-      worksheetqueues = fisherYatesShuffle(worksheetqueues);
+      worksheetqueues = FisherYatesShuffle(worksheetqueues);
     } else {
       worksheetqueues = this.prepareWordQueue(
         this.coverContentToQueue(this.getVisibleData()),
@@ -1130,7 +1123,7 @@ export class VocabularyExercisesComponent implements OnInit {
       case SelectionModeEnum.FreeSelection: {
         const count = option.countOfItems ?? 0;
         if (count > 0) {
-          this.applyCountSelection(fisherYatesShuffle(this.getVisibleData()), 0, count);
+          this.applyCountSelection(FisherYatesShuffle(this.getVisibleData()), 0, count);
         }
         break;
       }
diff --git a/src/app/shared/filter-dialog/filter-dialog-model.spec.ts b/src/app/shared/filter-dialog/filter-dialog-model.spec.ts
new file mode 100644
index 0000000..70a5eac
--- /dev/null
+++ b/src/app/shared/filter-dialog/filter-dialog-model.spec.ts
@@ -0,0 +1,581 @@
+import { FilterJoinType, FilterOperation } from 'actslib';
+import type { EnumLike, IFilterCondition, IFilterDefinition } from 'actslib';
+
+import {
+  appendMember,
+  defaultOperatorsFor,
+  depthOf,
+  describeMember,
+  emitLeaf,
+  emitTree,
+  emptyLeaf,
+  effectiveOperators,
+  findMember,
+  findProperty,
+  hasActiveFilterDefinition,
+  leafIsIncomplete,
+  mutateNode,
+  parentIdOf,
+  removeMember,
+  replaceLeaf,
+  seedTree,
+  summarizeFilterDefinition,
+  validateTree,
+  valueEditorFor,
+} from './filter-dialog-model';
+import type {
+  FilterCustomOperator,
+  FilterableProperty,
+  FilterIdGen,
+  SharedFilterDialogLeaf,
+  SharedFilterDialogNode,
+} from './filter-dialog-model';
+
+// ---------------------------------------------------------------------------
+// Fixture schema: one string property with a custom op, one number, one enum.
+// ---------------------------------------------------------------------------
+
+const IS_PHRASE: FilterCustomOperator = {
+  id: 'isPhrase',
+  labelKey: 'test.opIsPhrase',
+  emit: property => ({ property, operation: FilterOperation.Contains, lowValue: ' ' }),
+  recognize: c => c.operation === FilterOperation.Contains && c.lowValue === ' ',
+};
+
+const COLOR_VALUES: EnumLike = { red: 'red', blue: 'blue', green: 'green' };
+
+const enword: FilterableProperty = {
+  key: 'enword',
+  labelKey: 'test.word',
+  kind: 'string',
+  customOperators: [IS_PHRASE],
+  prepareValue: v => String(v).trim().toLowerCase(),
+};
+
+const rating: FilterableProperty = {
+  key: 'rating',
+  labelKey: 'test.rating',
+  kind: 'number',
+};
+
+const color: FilterableProperty = {
+  key: 'color',
+  labelKey: 'test.color',
+  kind: 'enum',
+  enumValues: COLOR_VALUES,
+  choices: [
+    { value: 'red', labelKey: 'test.red' },
+    { value: 'blue', labelKey: 'test.blue' },
+    { value: 'green', labelKey: 'test.green' },
+  ],
+};
+
+const schema: FilterableProperty[] = [enword, rating, color];
+
+/** Labels resolve through a small dictionary — keys not listed pass through. */
+const LABELS: Record<string, string> = {
+  'test.word': 'word',
+  'test.rating': 'rating',
+  'test.color': 'color',
+  'test.red': 'red',
+  'test.blue': 'blue',
+  'test.green': 'green',
+  'test.opIsPhrase': 'is phrase',
+  'common.joinAnd': 'AND',
+  'common.joinOr': 'OR',
+  'common.filterGroup': 'group',
+  'common.opContains': 'contains',
+  'common.opBeginsWith': 'starts with',
+  'common.opEqual': 'equals',
+  'common.opEndsWith': 'ends with',
+  'common.opGreaterThan': '>',
+  'common.opGreaterOrEqual': '>=',
+  'common.opLessThan': '<',
+  'common.opLessOrEqual': '<=',
+  'common.opBetween': 'between',
+};
+const labels = { translate: (key: string): string => LABELS[key] ?? key };
+
+const mkIdGen = (): FilterIdGen => {
+  let n = 0;
+  return () => ++n;
+};
+
+const wordLeaf = (text: string): SharedFilterDialogLeaf => ({
+  id: 101,
+  propertyKey: 'enword',
+  operator: FilterOperation.Contains,
+  single: text,
+  between: [null, null],
+  choices: [],
+});
+
+const ratingLeaf = (value: number | null, op = FilterOperation.GreaterOrEqual): SharedFilterDialogLeaf => ({
+  id: 102,
+  propertyKey: 'rating',
+  operator: op,
+  single: value,
+  between: [null, null],
+  choices: [],
+});
+
+describe('filter-dialog-model', () => {
+  describe('operators', () => {
+    it('defaults strings to the full actslib matrix (shape match + lexicographic + Between)', () => {
+      expect(defaultOperatorsFor('string')).toEqual([
+        FilterOperation.BeginsWith,
+        FilterOperation.Contains,
+        FilterOperation.Equal,
+        FilterOperation.EndsWith,
+        FilterOperation.GreaterOrEqual,
+        FilterOperation.GreaterThan,
+        FilterOperation.LessOrEqual,
+        FilterOperation.LessThan,
+        FilterOperation.Between,
+      ]);
+    });
+
+    it('defaults numbers to comparisons plus Between', () => {
+      expect(defaultOperatorsFor('number')).toContain(FilterOperation.Between);
+      expect(defaultOperatorsFor('number')).toContain(FilterOperation.GreaterOrEqual);
+      expect(defaultOperatorsFor('date')).toEqual(defaultOperatorsFor('number'));
+    });
+
+    it('an enum property only ever offers Equal (membership is the editor)', () => {
+      expect(defaultOperatorsFor('enum')).toEqual([FilterOperation.Equal]);
+      expect(effectiveOperators(color)).toEqual([FilterOperation.Equal]);
+    });
+
+    it('a whitelist narrows (in its own order) and drops unsupported operators', () => {
+      const p: FilterableProperty = {
+        key: 'k',
+        labelKey: 'test.k',
+        kind: 'number',
+        operations: [FilterOperation.Equal, FilterOperation.Contains], // Contains is not numeric
+      };
+      expect(effectiveOperators(p)).toEqual([FilterOperation.Equal]);
+    });
+  });
+
+  describe('editor dispatch', () => {
+    it('routes kind + operator to the right value editor', () => {
+      expect(valueEditorFor(enword, FilterOperation.Contains)).toBe('text');
+      expect(valueEditorFor(rating, FilterOperation.Equal)).toBe('number');
+      expect(valueEditorFor(rating, FilterOperation.Between)).toBe('between');
+      expect(valueEditorFor(color, FilterOperation.Equal)).toBe('enum');
+      expect(valueEditorFor(enword, 'isPhrase')).toBe('none');
+    });
+  });
+
+  describe('seedTree', () => {
+    it('seeds an empty/undefined definition into an empty AND root', () => {
+      const root = seedTree(undefined, schema, mkIdGen());
+      expect(root.join).toBe(FilterJoinType.AND);
+      expect(root.members).toEqual([]);
+
+      const explicit = seedTree({ join: FilterJoinType.OR, conditions: [] }, schema, mkIdGen());
+      expect(explicit.join).toBe(FilterJoinType.OR);
+      expect(explicit.members).toEqual([]);
+    });
+
+    it('seeds flat conditions into leaves carrying property, operator and value', () => {
+      const root = seedTree(
+        {
+          join: FilterJoinType.AND,
+          conditions: [
+            { property: 'enword', operation: FilterOperation.BeginsWith, lowValue: 'App' },
+            { property: 'rating', operation: FilterOperation.LessThan, lowValue: 4 },
+          ],
+        },
+        schema,
+        mkIdGen()
+      );
+      expect(root.members.length).toBe(2);
+      const [word, num] = root.members as SharedFilterDialogLeaf[];
+      expect(word).toEqual(expect.objectContaining({ propertyKey: 'enword', operator: 'BeginsWith', single: 'App' }));
+      expect(num).toEqual(expect.objectContaining({ propertyKey: 'rating', operator: '<', single: 4 }));
+    });
+
+    it('preserves nesting to any depth', () => {
+      const def: IFilterDefinition = {
+        join: FilterJoinType.AND,
+        conditions: [
+          { property: 'enword', operation: FilterOperation.Contains, lowValue: 'x' },
+          {
+            join: FilterJoinType.OR,
+            conditions: [
+              { property: 'rating', operation: FilterOperation.Equal, lowValue: 5 },
+              {
+                join: FilterJoinType.AND,
+                conditions: [
+                  { property: 'enword', operation: FilterOperation.EndsWith, lowValue: 'y' },
+                  { property: 'rating', operation: FilterOperation.GreaterThan, lowValue: 1 },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const root = seedTree(def, schema, mkIdGen());
+      const orGroup = root.members[1] as SharedFilterDialogNode;
+      expect(orGroup.join).toBe(FilterJoinType.OR);
+      const andGroup = orGroup.members[1] as SharedFilterDialogNode;
+      expect((andGroup.members[0] as SharedFilterDialogLeaf).single).toBe('y');
+    });
+
+    it('folds a custom-operator condition back into its valueless leaf', () => {
+      const root = seedTree(
+        { join: FilterJoinType.AND, conditions: [{ property: 'enword', operation: FilterOperation.Contains, lowValue: ' ' }] },
+        schema,
+        mkIdGen()
+      );
+      const leaf = root.members[0] as SharedFilterDialogLeaf;
+      expect(leaf.operator).toBe('isPhrase');
+    });
+
+    it('folds an enum OR-of-Equal group into one multi-choice leaf, and seeds bare Equals', () => {
+      const root = seedTree(
+        {
+          join: FilterJoinType.AND,
+          conditions: [
+            {
+              join: FilterJoinType.OR,
+              conditions: [
+                { property: 'color', operation: FilterOperation.Equal, lowValue: 'red', enumValues: COLOR_VALUES },
+                { property: 'color', operation: FilterOperation.Equal, lowValue: 'blue', enumValues: COLOR_VALUES },
+              ],
+            },
+            { property: 'rating', operation: FilterOperation.Equal, lowValue: 2 },
+          ],
+        },
+        schema,
+        mkIdGen()
+      );
+      const folded = root.members[0] as SharedFilterDialogLeaf;
+      expect(folded.propertyKey).toBe('color');
+      expect(folded.choices).toEqual(['red', 'blue']);
+    });
+
+    it('does NOT fold an OR group that mixes properties or joins with AND', () => {
+      const root = seedTree(
+        {
+          join: FilterJoinType.AND,
+          conditions: [
+            {
+              join: FilterJoinType.OR,
+              conditions: [
+                { property: 'color', operation: FilterOperation.Equal, lowValue: 'red' },
+                { property: 'rating', operation: FilterOperation.Equal, lowValue: 2 },
+              ],
+            },
+          ],
+        },
+        schema,
+        mkIdGen()
+      );
+      expect(Array.isArray((root.members[0] as SharedFilterDialogNode).members)).toBe(true); // stays a group
+    });
+
+    it('seeds Between bounds into the leaf', () => {
+      const root = seedTree(
+        {
+          join: FilterJoinType.AND,
+          conditions: [{ property: 'rating', operation: FilterOperation.Between, lowValue: 2, highValue: 4 }],
+        },
+        schema,
+        mkIdGen()
+      );
+      const leaf = root.members[0] as SharedFilterDialogLeaf;
+      expect(leaf.operator).toBe('Between');
+      expect(leaf.between).toEqual([2, 4]);
+    });
+
+    it('never mutates the caller definition', () => {
+      const def: IFilterDefinition = {
+        join: FilterJoinType.AND,
+        conditions: [{ property: 'enword', operation: FilterOperation.Contains, lowValue: 'x' }],
+      };
+      const before = JSON.stringify(def);
+      seedTree(def, schema, mkIdGen());
+      expect(JSON.stringify(def)).toBe(before);
+    });
+  });
+
+  describe('emitTree', () => {
+    const node = (...members: SharedFilterDialogNode['members']): SharedFilterDialogNode => ({
+      id: 1,
+      join: FilterJoinType.AND,
+      members,
+    });
+
+    it('emits string conditions with prepareValue applied (trim + lowercase)', () => {
+      const def = emitTree(node(wordLeaf('  APP ')), schema);
+      expect(def.conditions).toEqual([{ property: 'enword', operation: FilterOperation.Contains, lowValue: 'app' }]);
+    });
+
+    it('emits custom operators via their emit hook (no prepareValue)', () => {
+      const phrase: SharedFilterDialogLeaf = { ...wordLeaf('ignored'), operator: 'isPhrase' };
+      expect(emitLeaf(phrase, schema)).toEqual({ property: 'enword', operation: FilterOperation.Contains, lowValue: ' ' });
+    });
+
+    it('emits one enum choice as a single Equal, N choices as an OR-of-Equal group (with enumValues)', () => {
+      const one: SharedFilterDialogLeaf = { id: 3, propertyKey: 'color', operator: 'Equal', single: null, between: [null, null], choices: ['red'] };
+      const many: SharedFilterDialogLeaf = { ...one, id: 4, choices: ['red', 'blue'] };
+      expect(emitLeaf(one, schema)).toEqual({ property: 'color', operation: FilterOperation.Equal, lowValue: 'red', enumValues: COLOR_VALUES });
+      const group = emitLeaf(many, schema) as IFilterDefinition;
+      expect(group.join).toBe(FilterJoinType.OR);
+      expect((group.conditions as IFilterCondition[]).map(c => c.lowValue)).toEqual(['red', 'blue']);
+    });
+
+    it('emits Between with both bounds prepared', () => {
+      const leaf: SharedFilterDialogLeaf = {
+        id: 5,
+        propertyKey: 'rating',
+        operator: FilterOperation.Between,
+        single: null,
+        between: [2, 4],
+        choices: [],
+      };
+      expect(emitLeaf(leaf, schema)).toEqual({ property: 'rating', operation: FilterOperation.Between, lowValue: 2, highValue: 4 });
+    });
+
+    it('drops incomplete leaves and empty sub-groups', () => {
+      const emptyGroup: SharedFilterDialogNode = { id: 9, join: FilterJoinType.OR, members: [wordLeaf('  ')] };
+      const def = emitTree(node(wordLeaf('ok'), emptyGroup), schema);
+      expect(def.conditions.length).toBe(1);
+      expect((def.conditions[0] as IFilterCondition).lowValue).toBe('ok');
+    });
+
+    it('an empty root emits an empty definition (the clear-filter state)', () => {
+      expect(emitTree(node(), schema)).toEqual({ join: FilterJoinType.AND, conditions: [] });
+    });
+
+    it('round-trips: emit -> seed -> emit is stable (nesting, enum fold, custom, Between)', () => {
+      const root: SharedFilterDialogNode = {
+        id: 1,
+        join: FilterJoinType.AND,
+        members: [
+          wordLeaf(' pie '),
+          {
+            id: 2,
+            join: FilterJoinType.OR,
+            members: [
+              { id: 3, propertyKey: 'color', operator: 'Equal', single: null, between: [null, null], choices: ['red', 'blue'] },
+              {
+                id: 4,
+                propertyKey: 'rating',
+                operator: 'Between',
+                single: null,
+                between: [1, 5],
+                choices: [],
+              },
+            ],
+          },
+        ],
+      };
+      const first = emitTree(root, schema);
+      const second = emitTree(seedTree(first, schema, mkIdGen()), schema);
+      expect(second).toEqual(first);
+    });
+  });
+
+  describe('tree edits (immutable)', () => {
+    const buildTree = (): SharedFilterDialogNode => ({
+      id: 1,
+      join: FilterJoinType.AND,
+      members: [
+        wordLeaf('a'),
+        { id: 2, join: FilterJoinType.OR, members: [ratingLeaf(3), { ...wordLeaf('b'), id: 103 }] },
+      ],
+    });
+
+    it('findMember / parentIdOf / depthOf locate members through nesting', () => {
+      const root = buildTree();
+      expect(findMember(root, 103)?.id).toBe(103);
+      expect(parentIdOf(root, 103)).toBe(2);
+      expect(parentIdOf(root, 2)).toBe(1);
+      expect(depthOf(root, 103, 1)).toBe(3);
+      expect(depthOf(root, 999, 1)).toBe(0);
+    });
+
+    it('append/remove/replace replace the path and leave untouched siblings identical', () => {
+      const root = buildTree();
+      const before = root.members[0];
+
+      const appended = appendMember(root, 2, ratingLeaf(5, FilterOperation.Equal));
+      expect(appended).not.toBe(root);
+      expect((findMember(appended, 2) as SharedFilterDialogNode).members.length).toBe(3);
+      expect(findMember(appended, 101)).toBe(before); // untouched leaf keeps identity
+
+      const removed = removeMember(root, 103);
+      expect((findMember(removed, 2) as SharedFilterDialogNode).members.length).toBe(1);
+      expect((findMember(removed, 2) as SharedFilterDialogNode).members[0]).toBe(root.members[1] && (root.members[1] as SharedFilterDialogNode).members[0]);
+
+      const patched = replaceLeaf(root, 101, { ...wordLeaf('z'), id: 101 });
+      expect((findMember(patched, 101) as SharedFilterDialogLeaf).single).toBe('z');
+      expect((findMember(patched, 103) as SharedFilterDialogLeaf).single).toBe('b');
+    });
+
+    it('mutateNode flips a join immutably', () => {
+      const root = buildTree();
+      const flipped = mutateNode(root, 2, n => ({ ...n, join: FilterJoinType.AND }));
+      expect((findMember(flipped, 2) as SharedFilterDialogNode).join).toBe(FilterJoinType.AND);
+      expect((findMember(root, 2) as SharedFilterDialogNode).join).toBe(FilterJoinType.OR);
+    });
+
+    it('emptyLeaf picks the first property with its first operator', () => {
+      const leaf = emptyLeaf(schema[0], mkIdGen());
+      expect(leaf.propertyKey).toBe('enword');
+      expect(leaf.operator).toBe(FilterOperation.BeginsWith);
+      expect(leaf.single).toBeNull();
+    });
+  });
+
+  describe('validateTree', () => {
+    const rootOf = (...members: SharedFilterDialogNode['members']): SharedFilterDialogNode => ({
+      id: 1,
+      join: FilterJoinType.AND,
+      members,
+    });
+
+    it('flags blank text, null numeric and null Between bounds; custom ops never', () => {
+      const phrase: SharedFilterDialogLeaf = { ...wordLeaf(''), operator: 'isPhrase' };
+      const v = validateTree(rootOf(wordLeaf('  '), ratingLeaf(null), phrase), schema);
+      expect(v.missingValueIds).toEqual([101, 102]);
+      expect(v.canSubmit).toBe(false);
+    });
+
+    it('flags an enum leaf with zero choices, accepts one or more', () => {
+      const none: SharedFilterDialogLeaf = { id: 7, propertyKey: 'color', operator: 'Equal', single: null, between: [null, null], choices: [] };
+      const one: SharedFilterDialogLeaf = { ...none, id: 8, choices: ['red'] };
+      expect(leafIsIncomplete(none, color)).toBe(true);
+      expect(leafIsIncomplete(one, color)).toBe(false);
+      expect(validateTree(rootOf(one, ratingLeaf(2)), schema).canSubmit).toBe(true);
+    });
+
+    it('flags a Between whose low exceeds its high (and missing bounds)', () => {
+      const bad: SharedFilterDialogLeaf = { id: 9, propertyKey: 'rating', operator: 'Between', single: null, between: [5, 2], choices: [] };
+      const missing: SharedFilterDialogLeaf = { ...bad, id: 10, between: [5, null] };
+      const ok: SharedFilterDialogLeaf = { ...bad, id: 11, between: [2, 5] };
+      expect(validateTree(rootOf(bad, ok), schema).missingValueIds).toEqual([9]);
+      expect(validateTree(rootOf(missing, ok), schema).missingValueIds).toEqual([10]);
+      expect(validateTree(rootOf(ok, ok), schema).canSubmit).toBe(true);
+    });
+
+    it('zero is a valid number value (not treated as empty)', () => {
+      expect(leafIsIncomplete(ratingLeaf(0, FilterOperation.Equal), rating)).toBe(false);
+    });
+
+    it('nested groups need two or more members; the root is exempt', () => {
+      const single: SharedFilterDialogNode = { id: 20, join: FilterJoinType.OR, members: [wordLeaf('a')] };
+      const empty: SharedFilterDialogNode = { id: 21, join: FilterJoinType.OR, members: [] };
+      expect(validateTree(rootOf(single, ratingLeaf(1)), schema).invalidGroupIds).toEqual([20]);
+      expect(validateTree(rootOf(empty, ratingLeaf(1)), schema).invalidGroupIds).toEqual([21]);
+      // root with fewer than two members is fine…
+      expect(validateTree(rootOf(wordLeaf('a')), schema).canSubmit).toBe(true);
+      expect(validateTree(rootOf(), schema).canSubmit).toBe(true);
+      // …but a deep nested violation is still caught.
+      const deep: SharedFilterDialogNode = { id: 22, join: FilterJoinType.AND, members: [single, ratingLeaf(2)] };
+      expect(validateTree(rootOf(deep, wordLeaf('x')), schema).invalidGroupIds).toEqual([20]);
+    });
+  });
+
+  describe('summarizeFilterDefinition', () => {
+    const cond = (property: string, operation: FilterOperation, lowValue: unknown, highValue?: unknown): IFilterCondition =>
+      highValue === undefined
+        ? { property, operation, lowValue: lowValue as string | number }
+        : { property, operation, lowValue: lowValue as string | number, highValue: highValue as string | number };
+
+    it('joins members with the group join word and parenthesizes nested multi-member groups', () => {
+      const def: IFilterDefinition = {
+        join: FilterJoinType.AND,
+        conditions: [
+          cond('enword', FilterOperation.Contains, 'app'),
+          {
+            join: FilterJoinType.OR,
+            conditions: [cond('rating', FilterOperation.GreaterOrEqual, 3), cond('rating', FilterOperation.LessOrEqual, 4)],
+          },
+        ],
+      };
+      expect(summarizeFilterDefinition(def, schema, labels)).toBe('word contains app AND (rating >= 3 OR rating <= 4)');
+    });
+
+    it('renders custom operators through their recognize hook', () => {
+      const def: IFilterDefinition = { join: FilterJoinType.AND, conditions: [cond('enword', FilterOperation.Contains, ' ')] };
+      expect(summarizeFilterDefinition(def, schema, labels)).toBe('word is phrase');
+    });
+
+    it('renders an enum OR fold as one slash-joined phrase and a bare Equal as one label', () => {
+      const many: IFilterDefinition = {
+        join: FilterJoinType.AND,
+        conditions: [
+          {
+            join: FilterJoinType.OR,
+            conditions: [cond('color', FilterOperation.Equal, 'red'), cond('color', FilterOperation.Equal, 'blue')],
+          },
+        ],
+      };
+      expect(summarizeFilterDefinition(many, schema, labels)).toBe('color red/blue');
+      const one: IFilterDefinition = { join: FilterJoinType.AND, conditions: [cond('color', FilterOperation.Equal, 'green')] };
+      expect(summarizeFilterDefinition(one, schema, labels)).toBe('color green');
+    });
+
+    it('renders Between as low≤x≤high', () => {
+      const def: IFilterDefinition = { join: FilterJoinType.AND, conditions: [cond('rating', FilterOperation.Between, 2, 5)] };
+      expect(summarizeFilterDefinition(def, schema, labels)).toBe('rating 2≤x≤5');
+    });
+
+    it('caps with an ellipsis and returns empty string for an empty definition', () => {
+      const def: IFilterDefinition = {
+        join: FilterJoinType.AND,
+        conditions: [cond('enword', FilterOperation.Contains, 'abcdefghij'), cond('enword', FilterOperation.Contains, 'klmnopqrst')],
+      };
+      const capped = summarizeFilterDefinition(def, schema, labels, 20);
+      expect(capped.length).toBe(20);
+      expect(capped.endsWith('…')).toBe(true);
+      expect(summarizeFilterDefinition({ join: FilterJoinType.AND, conditions: [] }, schema, labels)).toBe('');
+    });
+  });
+
+  describe('describeMember', () => {
+    it('labels nodes with their join and leaves with their condition phrase', () => {
+      const root = seedTree(
+        {
+          join: FilterJoinType.AND,
+          conditions: [
+            { property: 'enword', operation: FilterOperation.Contains, lowValue: 'app' },
+            { join: FilterJoinType.OR, conditions: [{ property: 'rating', operation: FilterOperation.Equal, lowValue: 2 }, { property: 'rating', operation: FilterOperation.Equal, lowValue: 3 }] },
+          ],
+        },
+        schema,
+        mkIdGen()
+      );
+      expect(describeMember(root.members[0], schema, labels)).toBe('word contains app');
+      expect(describeMember(root.members[1], schema, labels)).toBe('group (OR)');
+    });
+
+    it('labels an incomplete leaf with just its property name', () => {
+      expect(describeMember(wordLeaf(''), schema, labels)).toBe('word');
+    });
+  });
+
+  describe('hasActiveFilterDefinition', () => {
+    it('is false for undefined/empty and true when any (nested) condition exists', () => {
+      expect(hasActiveFilterDefinition(undefined)).toBe(false);
+      expect(hasActiveFilterDefinition({ join: FilterJoinType.AND, conditions: [] })).toBe(false);
+      expect(
+        hasActiveFilterDefinition({
+          join: FilterJoinType.AND,
+          conditions: [{ join: FilterJoinType.OR, conditions: [{ property: 'rating', operation: FilterOperation.Equal, lowValue: 2 }] }],
+        })
+      ).toBe(true);
+    });
+  });
+
+  describe('findProperty', () => {
+    it('locates by key and misses gracefully', () => {
+      expect(findProperty(schema, 'rating')).toBe(rating);
+      expect(findProperty(schema, 'nope')).toBeUndefined();
+    });
+  });
+});
diff --git a/src/app/shared/filter-dialog/filter-dialog-model.ts b/src/app/shared/filter-dialog/filter-dialog-model.ts
new file mode 100644
index 0000000..c96b8ff
--- /dev/null
+++ b/src/app/shared/filter-dialog/filter-dialog-model.ts
@@ -0,0 +1,816 @@
+// Pure model of the shared filter dialog (docs/reusable-filter-dialog-design.md).
+//
+// Everything the dialog can do to its condition tree lives here as plain
+// functions over plain objects: seeding a caller's actslib `IFilterDefinition`
+// into editable nodes, emitting edited nodes back to a definition, immutable
+// tree edits, validation, and the human-readable summary. The component is
+// thin by design — it holds signals and wires the template, while all logic
+// below is unit-testable without Angular.
+
+import { FilterJoinType, FilterOperation } from 'actslib';
+import type { EnumLike, IFilterCondition, IFilterDefinition } from 'actslib';
+
+// ---------------------------------------------------------------------------
+// Schema (per-page configuration)
+// ---------------------------------------------------------------------------
+
+/** What kind of values a property carries. Drives the default operator list,
+ *  the value editor, and the seed/emit dispatch. */
+export type FilterPropertyKind = 'string' | 'number' | 'date' | 'enum';
+
+/** One value in an enum property's multiple-choice editor. */
+export interface FilterEnumChoice {
+  value: string | number;
+  /** i18n key, translated by the dialog. */
+  labelKey: string;
+}
+
+/** A valueless, app-specific operator (e.g. vocabulary's `isPhrase`). The page
+ *  supplies the actslib encoding and the fold-back recognizer. */
+export interface FilterCustomOperator {
+  /** editor-local id; never crosses the dialog boundary */
+  id: string;
+  labelKey: string;
+  /** actslib condition this operator emits on Submit */
+  emit(property: string): IFilterCondition;
+  /** true when `condition` is one of this operator's emissions (seed fold-back) */
+  recognize(condition: IFilterCondition): boolean;
+}
+
+/** One filterable property of the page's evaluated target shape. */
+export interface FilterableProperty {
+  /** actslib condition property name (matched against the evaluated target) */
+  key: string;
+  /** i18n key naming the property in the editor, tree labels and preview */
+  labelKey: string;
+  kind: FilterPropertyKind;
+  /** offered operators; default = the kind's supported set, in this order */
+  operations?: FilterOperation[];
+  /** kind 'enum': actslib enum validation, passed through to each condition */
+  enumValues?: EnumLike;
+  /** kind 'enum': the choices of the multiple-value editor */
+  choices?: FilterEnumChoice[];
+  /** valueless operators appended to the operator select */
+  customOperators?: FilterCustomOperator[];
+  /** number editor constraint (UI only, not enforced on emit) */
+  numberRange?: { min?: number; max?: number };
+  /** transforms a raw string/number value before it is emitted (D6: trim +
+   *  lowercase); never applied to dates or custom operators */
+  prepareValue?: (value: string | number) => string | number;
+}
+
+/** MAT_DIALOG_DATA: the schema, the filter in effect (seed), and labels. */
+export interface FilterDialogData {
+  properties: FilterableProperty[];
+  root?: IFilterDefinition;
+  /** deepest group level the toolbar offers; default 4 */
+  maxDepth?: number;
+  /** dialog title i18n key; default 'common.editFilter' */
+  titleKey?: string;
+}
+
+/** Submit result: the edited definition. Cancel returns undefined. */
+export interface FilterDialogResult {
+  root: IFilterDefinition;
+}
+
+// ---------------------------------------------------------------------------
+// Editor state
+// ---------------------------------------------------------------------------
+
+/** Scalar value an editor holds (the three kinds the value editors cover). */
+export type FilterScalar = string | number | Date;
+
+/**
+ * One editable leaf. The three value slots (single / between / choices)
+ * coexist so switching the property or operator never discards what the user
+ * typed — `emitLeaf` reads only the slot the current dispatch selects.
+ */
+export interface SharedFilterDialogLeaf {
+  id: number;
+  propertyKey: string;
+  /** a FilterOperation value, or one of the property's custom operator ids */
+  operator: string;
+  /** valued single-value operators (all kinds) */
+  single: FilterScalar | null;
+  /** Between bounds [low, high] */
+  between: [FilterScalar | null, FilterScalar | null];
+  /** enum multiple-choice selection */
+  choices: FilterScalar[];
+}
+
+/** One editable group node: an AND/OR join over an ordered member list. */
+export interface SharedFilterDialogNode {
+  id: number;
+  join: FilterJoinType;
+  members: SharedFilterDialogMember[];
+}
+
+/** One tree member: a condition leaf or a nested group node. */
+export type SharedFilterDialogMember = SharedFilterDialogLeaf | SharedFilterDialogNode;
+
+/** Discriminate a nested group node from a leaf (nodes carry `members`). */
+export const isFilterDialogNode = (
+  m: SharedFilterDialogMember
+): m is SharedFilterDialogNode => (m as SharedFilterDialogNode).members !== undefined;
+
+/** Allocate editor ids; passed into the seed/insert helpers. */
+export type FilterIdGen = () => number;
+
+// ---------------------------------------------------------------------------
+// Operators
+// ---------------------------------------------------------------------------
+
+/** The numeric/comparison operators actslib supports on number and date. */
+const COMPARISON_OPS: FilterOperation[] = [
+  FilterOperation.GreaterOrEqual,
+  FilterOperation.GreaterThan,
+  FilterOperation.Equal,
+  FilterOperation.LessOrEqual,
+  FilterOperation.LessThan,
+  FilterOperation.Between,
+];
+
+/** All string operators actslib supports: shape match (BeginsWith/Contains/
+ *  Equal/EndsWith) plus lexicographic comparisons and Between (inclusive on
+ *  both bounds) — the full matrix of FilterUtility.MatchStringCondition. */
+const STRING_OPS: FilterOperation[] = [
+  FilterOperation.BeginsWith,
+  FilterOperation.Contains,
+  FilterOperation.Equal,
+  FilterOperation.EndsWith,
+  FilterOperation.GreaterOrEqual,
+  FilterOperation.GreaterThan,
+  FilterOperation.LessOrEqual,
+  FilterOperation.LessThan,
+  FilterOperation.Between,
+];
+
+/** The default operator list offered for each kind. */
+export const defaultOperatorsFor = (kind: FilterPropertyKind): FilterOperation[] => {
+  switch (kind) {
+    case 'string':
+      return STRING_OPS;
+    case 'number':
+    case 'date':
+      return COMPARISON_OPS;
+    case 'enum':
+      // Membership is all actslib can express; the leaf's operator is fixed.
+      return [FilterOperation.Equal];
+  }
+};
+
+/**
+ * Operators offered for a property: the whitelist when given (order preserved)
+ * else the kind default. An enum property always offers only `Equal` — its
+ * multi-choice editor compiles to OR-of-`Equal` (§7.3), so the select is fixed.
+ */
+export const effectiveOperators = (prop: FilterableProperty): FilterOperation[] => {
+  if (prop.kind === 'enum') {
+    return [FilterOperation.Equal];
+  }
+  const defaults = defaultOperatorsFor(prop.kind);
+  if (!prop.operations) {
+    return defaults;
+  }
+  // Narrow the whitelist to what the kind actually supports; drop the rest.
+  const supported = new Set<string>(defaults);
+  return prop.operations.filter(op => supported.has(op));
+};
+
+/** True when `operator` is one of the property's custom (valueless) ids. */
+export const findCustomOperator = (
+  prop: FilterableProperty | undefined,
+  operator: string
+): FilterCustomOperator | undefined => prop?.customOperators?.find(o => o.id === operator);
+
+/** Look up a property by key in the schema. */
+export const findProperty = (
+  schema: FilterableProperty[],
+  key: string
+): FilterableProperty | undefined => schema.find(p => p.key === key);
+
+/** Which value editor a leaf's property kind + operator selects (§7 table). */
+export type FilterValueEditor = 'text' | 'number' | 'date' | 'between' | 'enum' | 'none';
+
+export const valueEditorFor = (prop: FilterableProperty, operator: string): FilterValueEditor => {
+  if (findCustomOperator(prop, operator)) {
+    return 'none';
+  }
+  if (operator === FilterOperation.Between) {
+    return 'between';
+  }
+  switch (prop.kind) {
+    case 'enum':
+      return 'enum';
+    case 'number':
+      return 'number';
+    case 'date':
+      return 'date';
+    case 'string':
+      return 'text';
+  }
+};
+
+// ---------------------------------------------------------------------------
+// Construction / seeding (definition -> editor tree)
+// ---------------------------------------------------------------------------
+
+/** actslib's discriminator: a leaf condition carries a string `property`. */
+const isFilterCondition = (m: IFilterCondition | IFilterDefinition): m is IFilterCondition =>
+  typeof (m as IFilterCondition).property === 'string';
+
+/**
+ * True when a definition holds at least one condition anywhere (nested
+ * included). Dialog-emitted definitions never contain empty sub-groups, so
+ * this is defensive for hand-built seeds — pages use it to decide between the
+ * "new filter" and the summary menu label.
+ */
+export const hasActiveFilterDefinition = (def: IFilterDefinition | undefined): boolean =>
+  !!def && def.conditions.some(c => (isFilterCondition(c) ? true : hasActiveFilterDefinition(c)));
+
+/** A blank leaf for a property (all value slots cleared, first operator). */
+export const emptyLeaf = (prop: FilterableProperty, newId: FilterIdGen): SharedFilterDialogLeaf => {
+  const ops = effectiveOperators(prop);
+  const custom = prop.customOperators?.[0];
+  // Prefer the first valued operator; only default to a custom op when it has none.
+  const operator = ops.length > 0 ? ops[0] : custom?.id ?? FilterOperation.Equal;
+  return {
+    id: newId(),
+    propertyKey: prop.key,
+    operator,
+    single: null,
+    between: [null, null],
+    choices: [],
+  };
+};
+
+const blankLeaf = (propertyKey: string, operator: string, newId: FilterIdGen): SharedFilterDialogLeaf => ({
+  id: newId(),
+  propertyKey,
+  operator,
+  single: null,
+  between: [null, null],
+  choices: [],
+});
+
+/**
+ * Try to fold an OR-of-`Equal` group back into one enum multi-choice leaf
+ * (§7.3): the group must be OR-joined, every member an `Equal` condition on
+ * the same enum property. Returns the leaf or null (not a fold candidate).
+ */
+const foldEnumOrGroup = (
+  def: IFilterDefinition,
+  schema: FilterableProperty[],
+  newId: FilterIdGen
+): SharedFilterDialogLeaf | null => {
+  if (def.join !== FilterJoinType.OR || def.conditions.length < 2) {
+    return null;
+  }
+  const conditions = def.conditions.filter(isFilterCondition);
+  if (conditions.length !== def.conditions.length) {
+    return null; // a nested group is among the members — not a fold candidate
+  }
+  const first = conditions[0];
+  const prop = findProperty(schema, first.property);
+  if (!prop || prop.kind !== 'enum') {
+    return null;
+  }
+  if (!conditions.every(c => c.property === prop.key && c.operation === FilterOperation.Equal)) {
+    return null;
+  }
+  const leaf = blankLeaf(prop.key, FilterOperation.Equal, newId);
+  leaf.choices = conditions.map(c => c.lowValue as FilterScalar);
+  return leaf;
+};
+
+const seedCondition = (
+  cond: IFilterCondition,
+  schema: FilterableProperty[],
+  newId: FilterIdGen
+): SharedFilterDialogLeaf => {
+  const prop = findProperty(schema, cond.property);
+  // Custom (valueless) operators are recognized before any value dispatch.
+  const custom = prop?.customOperators?.find(o => o.recognize(cond));
+  if (custom) {
+    return blankLeaf(cond.property, custom.id, newId);
+  }
+  if (cond.operation === FilterOperation.Between) {
+    const leaf = blankLeaf(cond.property, FilterOperation.Between, newId);
+    leaf.between = [cond.lowValue ?? null, cond.highValue ?? null];
+    return leaf;
+  }
+  if (prop?.kind === 'enum') {
+    const leaf = blankLeaf(cond.property, FilterOperation.Equal, newId);
+    leaf.choices = cond.lowValue === undefined ? [] : [cond.lowValue];
+    return leaf;
+  }
+  const leaf = blankLeaf(cond.property, cond.operation, newId);
+  leaf.single = cond.lowValue ?? null;
+  return leaf;
+};
+
+/**
+ * Copy a caller's `IFilterDefinition` into editable nodes. Structure is
+ * preserved to any depth (never flattened); enum OR-groups and custom-op
+ * conditions fold back into single leaves so re-editing is lossless. The
+ * input definition is never mutated.
+ */
+export const seedTree = (
+  root: IFilterDefinition | undefined,
+  schema: FilterableProperty[],
+  newId: FilterIdGen
+): SharedFilterDialogNode => {
+  const seedNode = (def: IFilterDefinition): SharedFilterDialogNode => {
+    const members: SharedFilterDialogMember[] = [];
+    for (const member of def.conditions) {
+      if (isFilterCondition(member)) {
+        members.push(seedCondition(member, schema, newId));
+        continue;
+      }
+      const folded = foldEnumOrGroup(member, schema, newId);
+      if (folded) {
+        members.push(folded);
+        continue;
+      }
+      members.push(seedNode(member));
+    }
+    return {
+      id: newId(),
+      join: def.join ?? FilterJoinType.AND,
+      members,
+    };
+  };
+
+  if (!root) {
+    return { id: newId(), join: FilterJoinType.AND, members: [] };
+  }
+  return seedNode(root);
+};
+
+// ---------------------------------------------------------------------------
+// Emitting (editor tree -> definition)
+// ---------------------------------------------------------------------------
+
+const prepare = (prop: FilterableProperty | undefined, value: FilterScalar | null): FilterScalar | null => {
+  if (value === null || !prop?.prepareValue) {
+    return value;
+  }
+  return typeof value === 'string' || typeof value === 'number' ? prop.prepareValue(value) : value;
+};
+
+/** True when a leaf's active slot has no usable value yet. */
+export const leafIsIncomplete = (leaf: SharedFilterDialogLeaf, prop: FilterableProperty): boolean => {
+  switch (valueEditorFor(prop, leaf.operator)) {
+    case 'none':
+      return false;
+    case 'enum':
+      return leaf.choices.length === 0;
+    case 'between':
+      return leaf.between[0] === null || leaf.between[1] === null || leaf.between[0] === '' || leaf.between[1] === '';
+    case 'text':
+      return String(leaf.single ?? '').trim().length === 0;
+    default:
+      return leaf.single === null || leaf.single === '';
+  }
+};
+
+/**
+ * One leaf -> condition(s). Returns null when the leaf is incomplete (the
+ * caller drops it; validation ensures this never happens at Submit). An enum
+ * with N>1 choices expands to an OR-of-`Equal` group (§7.3).
+ */
+export const emitLeaf = (
+  leaf: SharedFilterDialogLeaf,
+  schema: FilterableProperty[]
+): IFilterCondition | IFilterDefinition | null => {
+  const prop = findProperty(schema, leaf.propertyKey);
+  if (!prop) {
+    return null;
+  }
+  const custom = findCustomOperator(prop, leaf.operator);
+  if (custom) {
+    return custom.emit(prop.key);
+  }
+  if (leaf.operator === FilterOperation.Between) {
+    if (leafIsIncomplete(leaf, prop)) {
+      return null;
+    }
+    return {
+      property: prop.key,
+      operation: FilterOperation.Between,
+      lowValue: prepare(prop, leaf.between[0]) as FilterScalar,
+      highValue: prepare(prop, leaf.between[1]) as FilterScalar,
+      ...(prop.enumValues ? { enumValues: prop.enumValues } : {}),
+    };
+  }
+  if (prop.kind === 'enum') {
+    if (leaf.choices.length === 0) {
+      return null;
+    }
+    const condition = (value: FilterScalar): IFilterCondition => ({
+      property: prop.key,
+      operation: FilterOperation.Equal,
+      lowValue: value,
+      ...(prop.enumValues ? { enumValues: prop.enumValues } : {}),
+    });
+    if (leaf.choices.length === 1) {
+      return condition(leaf.choices[0]);
+    }
+    return { join: FilterJoinType.OR, conditions: leaf.choices.map(condition) };
+  }
+  if (leafIsIncomplete(leaf, prop)) {
+    return null;
+  }
+  return {
+    property: prop.key,
+    operation: leaf.operator as FilterOperation,
+    lowValue: prepare(prop, leaf.single) as FilterScalar,
+    ...(prop.enumValues ? { enumValues: prop.enumValues } : {}),
+  };
+};
+
+/**
+ * Emit the editor tree to an actslib definition. Incomplete leaves and
+ * emptied sub-groups are dropped (an empty group would match everything);
+ * the root always yields a definition (empty conditions = match-all = the
+ * clear-filter state). Validation guarantees nothing is dropped at Submit.
+ */
+export const emitTree = (root: SharedFilterDialogNode, schema: FilterableProperty[]): IFilterDefinition => {
+  const emitNode = (node: SharedFilterDialogNode): Array<IFilterCondition | IFilterDefinition> => {
+    const out: Array<IFilterCondition | IFilterDefinition> = [];
+    for (const member of node.members) {
+      if (isFilterDialogNode(member)) {
+        const conditions = emitNode(member);
+        if (conditions.length > 0) {
+          out.push({ join: member.join, conditions });
+        }
+        continue;
+      }
+      const emitted = emitLeaf(member, schema);
+      if (emitted) {
+        out.push(emitted);
+      }
+    }
+    return out;
+  };
+  return { join: root.join, conditions: emitNode(root) };
+};
+
+// ---------------------------------------------------------------------------
+// Immutable edits
+// ---------------------------------------------------------------------------
+
+/** The member with `memberId`, or null. */
+export const findMember = (
+  node: SharedFilterDialogNode,
+  memberId: number
+): SharedFilterDialogMember | null => {
+  for (const m of node.members) {
+    if (m.id === memberId) {
+      return m;
+    }
+    if (isFilterDialogNode(m)) {
+      const found = findMember(m, memberId);
+      if (found) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+/** The id of the group that directly contains `memberId`, or null. */
+export const parentIdOf = (node: SharedFilterDialogNode, memberId: number): number | null => {
+  for (const m of node.members) {
+    if (m.id === memberId) {
+      return node.id;
+    }
+    if (isFilterDialogNode(m)) {
+      const found = parentIdOf(m, memberId);
+      if (found !== null) {
+        return found;
+      }
+    }
+  }
+  return null;
+};
+
+/** Level of the member with `memberId` (root = `depth`); 0 when not found. */
+export const depthOf = (node: SharedFilterDialogNode, memberId: number, depth: number): number => {
+  if (node.id === memberId) {
+    return depth;
+  }
+  for (const m of node.members) {
+    if (m.id === memberId) {
+      return depth + 1;
+    }
+    if (isFilterDialogNode(m)) {
+      const found = depthOf(m, memberId, depth + 1);
+      if (found > 0) {
+        return found;
+      }
+    }
+  }
+  return 0;
+};
+
+/** Replace the group node with `nodeId` (and its ancestors) immutably. */
+export const mutateNode = (
+  root: SharedFilterDialogNode,
+  nodeId: number,
+  transform: (node: SharedFilterDialogNode) => SharedFilterDialogNode
+): SharedFilterDialogNode => {
+  const walk = (node: SharedFilterDialogNode): SharedFilterDialogNode => {
+    if (node.id === nodeId) {
+      return transform(node);
+    }
+    let changed = false;
+    const members = node.members.map(m => {
+      if (!isFilterDialogNode(m)) {
+        return m;
+      }
+      const updated = walk(m);
+      if (updated !== m) {
+        changed = true;
+      }
+      return updated;
+    });
+    return changed ? { ...node, members } : node;
+  };
+  return walk(root);
+};
+
+/** Swap the leaf with `leafId` for `updated` (new object; same id). */
+export const replaceLeaf = (
+  root: SharedFilterDialogNode,
+  leafId: number,
+  updated: SharedFilterDialogLeaf
+): SharedFilterDialogNode => {
+  const parentId = parentIdOf(root, leafId);
+  if (parentId === null) {
+    return root;
+  }
+  return mutateNode(root, parentId, node => ({
+    ...node,
+    members: node.members.map(m => (m.id === leafId ? updated : m)),
+  }));
+};
+
+/** Append a member to the group with `nodeId`. */
+export const appendMember = (
+  root: SharedFilterDialogNode,
+  nodeId: number,
+  member: SharedFilterDialogMember
+): SharedFilterDialogNode =>
+  mutateNode(root, nodeId, node => ({ ...node, members: [...node.members, member] }));
+
+/** Remove the member with `memberId` from its parent group. */
+export const removeMember = (root: SharedFilterDialogNode, memberId: number): SharedFilterDialogNode => {
+  const parentId = parentIdOf(root, memberId);
+  if (parentId === null) {
+    return root;
+  }
+  return mutateNode(root, parentId, node => ({
+    ...node,
+    members: node.members.filter(m => m.id !== memberId),
+  }));
+};
+
+// ---------------------------------------------------------------------------
+// Validation (Submit gate)
+// ---------------------------------------------------------------------------
+
+export interface FilterTreeValidation {
+  /** ids of leaves whose active value editor holds no usable value */
+  missingValueIds: number[];
+  /** ids of nested groups with fewer than two members (root exempt) */
+  invalidGroupIds: number[];
+  /** true when the tree can be submitted */
+  canSubmit: boolean;
+}
+
+/**
+ * Validate the editor tree: every leaf must have a value (except valueless
+ * custom ops and the between low<=high rule), and every NESTED group must
+ * branch (>= 2 members). The root is exempt — 0 members clears the filter,
+ * 1 is a plain single-condition filter.
+ */
+export const validateTree = (root: SharedFilterDialogNode, schema: FilterableProperty[]): FilterTreeValidation => {
+  const missingValueIds: number[] = [];
+  const invalidGroupIds: number[] = [];
+  const checkBetweenOrder = (leaf: SharedFilterDialogLeaf): boolean => {
+    const [low, high] = leaf.between;
+    if (low === null || high === null || low === '' || high === '') {
+      return false; // incompleteness already flagged
+    }
+    if (typeof low === 'number' && typeof high === 'number') {
+      return low <= high;
+    }
+    if (low instanceof Date && high instanceof Date) {
+      return low.getTime() <= high.getTime();
+    }
+    if (typeof low === 'string' && typeof high === 'string') {
+      return low <= high;
+    }
+    return true;
+  };
+  const walk = (node: SharedFilterDialogNode, isRoot: boolean): void => {
+    if (!isRoot && node.members.length < 2) {
+      invalidGroupIds.push(node.id);
+    }
+    for (const m of node.members) {
+      if (isFilterDialogNode(m)) {
+        walk(m, false);
+        continue;
+      }
+      const prop = findProperty(schema, m.propertyKey);
+      if (!prop) {
+        missingValueIds.push(m.id);
+        continue;
+      }
+      if (leafIsIncomplete(m, prop) || (m.operator === FilterOperation.Between && !checkBetweenOrder(m))) {
+        missingValueIds.push(m.id);
+      }
+    }
+  };
+  walk(root, true);
+  return {
+    missingValueIds,
+    invalidGroupIds,
+    canSubmit: missingValueIds.length === 0 && invalidGroupIds.length === 0,
+  };
+};
+
+// ---------------------------------------------------------------------------
+// Summary (preview + menu label)
+// ---------------------------------------------------------------------------
+
+/** i18n key naming each actslib operator (used by the summary and labels). */
+export const FILTER_OPERATION_LABEL_KEYS: Record<FilterOperation, string> = {
+  [FilterOperation.BeginsWith]: 'common.opStartsWith',
+  [FilterOperation.Contains]: 'common.opContains',
+  [FilterOperation.Equal]: 'common.opEqual',
+  [FilterOperation.EndsWith]: 'common.opEndsWith',
+  [FilterOperation.GreaterThan]: 'common.opGreaterThan',
+  [FilterOperation.GreaterOrEqual]: 'common.opGreaterOrEqual',
+  [FilterOperation.LessThan]: 'common.opLessThan',
+  [FilterOperation.LessOrEqual]: 'common.opLessOrEqual',
+  [FilterOperation.Between]: 'common.opBetween',
+};
+
+/**
+ * Labelers the summary needs, resolved from a page's TranslocoService and the
+ * schema. The dialog supplies these; callers building a menu label pass the
+ * same shape.
+ */
+export interface FilterSummaryLabels {
+  translate: (key: string) => string;
+}
+
+const displayScalar = (value: FilterScalar): string =>
+  value instanceof Date ? value.toLocaleDateString() : String(value);
+
+/**
+ * Compact math symbols for the comparison operators on numeric/date properties
+ * ("rating >=3" rather than "rating Greater or equal 3"). String properties
+ * keep the word labels (their Equal means something different from `=`).
+ */
+const COMPARISON_SYMBOLS: Partial<Record<FilterOperation, string>> = {
+  [FilterOperation.GreaterOrEqual]: '>=',
+  [FilterOperation.GreaterThan]: '>',
+  [FilterOperation.Equal]: '=',
+  [FilterOperation.LessOrEqual]: '<=',
+  [FilterOperation.LessThan]: '<',
+};
+
+/** Render one emitted condition (or enum OR-group) to a short phrase. */
+const describeCondition = (
+  cond: IFilterCondition,
+  schema: FilterableProperty[],
+  labels: FilterSummaryLabels
+): string => {
+  const prop = findProperty(schema, cond.property);
+  const propLabel = prop ? labels.translate(prop.labelKey) : cond.property;
+  const custom = prop?.customOperators?.find(o => o.recognize(cond));
+  if (custom) {
+    return `${propLabel} ${labels.translate(custom.labelKey)}`;
+  }
+  if (cond.operation === FilterOperation.Between) {
+    const low = cond.lowValue === undefined ? '?' : displayScalar(cond.lowValue);
+    const high = cond.highValue === undefined ? '?' : displayScalar(cond.highValue);
+    return `${propLabel} ${low}≤x≤${high}`;
+  }
+  if (prop?.kind === 'enum') {
+    const choice = prop.choices?.find(c => c.value === cond.lowValue);
+    const valueLabel = choice ? labels.translate(choice.labelKey) : displayScalar(cond.lowValue as FilterScalar);
+    return `${propLabel} ${valueLabel}`;
+  }
+  const isNumericKind = prop?.kind === 'number' || prop?.kind === 'date';
+  const opLabel = (isNumericKind ? COMPARISON_SYMBOLS[cond.operation] : undefined)
+    ?? labels.translate(FILTER_OPERATION_LABEL_KEYS[cond.operation] ?? cond.operation);
+  const value = cond.lowValue === undefined ? '' : ` ${displayScalar(cond.lowValue)}`;
+  return `${propLabel}${value ? ` ${opLabel}${value}` : ` ${opLabel}`}`;
+};
+
+/**
+ * Human-readable rendering of a definition in the same parenthesized notation
+ * the filter menu label uses. Multi-member sub-groups get parentheses;
+ * an OR group of same-enum-property `Equal`s renders as one `prop a/b/c`
+ * phrase (the enum fold's display). `maxLength` caps with an ellipsis.
+ */
+export const summarizeFilterDefinition = (
+  def: IFilterDefinition,
+  schema: FilterableProperty[],
+  labels: FilterSummaryLabels,
+  maxLength = Number.POSITIVE_INFINITY
+): string => {
+  const foldEnumParts = (group: IFilterDefinition): string[] | null => {
+    const folded = group.conditions.every(
+      c => isFilterCondition(c) && c.operation === FilterOperation.Equal
+    );
+    if (!folded || group.conditions.length < 2) {
+      return null;
+    }
+    const conditions = group.conditions as IFilterCondition[];
+    const prop = findProperty(schema, conditions[0].property);
+    if (!prop || prop.kind !== 'enum') {
+      return null;
+    }
+    if (!conditions.every(c => c.property === prop.key)) {
+      return null;
+    }
+    const propLabel = labels.translate(prop.labelKey);
+    const valueLabels = conditions.map(c => {
+      const choice = prop.choices?.find(ch => ch.value === c.lowValue);
+      return choice ? labels.translate(choice.labelKey) : displayScalar(c.lowValue as FilterScalar);
+    });
+    return [`${propLabel} ${valueLabels.join('/')}`];
+  };
+
+  const renderGroup = (group: IFilterDefinition, nested: boolean): string | null => {
+    const folded = foldEnumParts(group);
+    if (folded) {
+      return folded.join(' ');
+    }
+    const parts: string[] = [];
+    for (const member of group.conditions) {
+      if (isFilterCondition(member)) {
+        parts.push(describeCondition(member, schema, labels));
+        continue;
+      }
+      const sub = renderGroup(member, true);
+      if (sub !== null) {
+        parts.push(sub);
+      }
+    }
+    if (parts.length === 0) {
+      return null;
+    }
+    const joinWord = group.join === FilterJoinType.OR
+      ? labels.translate('common.joinOr')
+      : labels.translate('common.joinAnd');
+    const joined = parts.join(` ${joinWord} `);
+    return nested && parts.length > 1 ? `(${joined})` : joined;
+  };
+
+  const joined = renderGroup(def, false) ?? '';
+  if (joined.length <= maxLength) {
+    return joined;
+  }
+  return `${joined.slice(0, maxLength - 1).trimEnd()}…`;
+};
+
+/**
+ * The tree-row label for one member: "Condition group (AND)" for nodes, a
+ * single-phrase condition summary for leaves (mirrors the emitted condition).
+ */
+export const describeMember = (
+  member: SharedFilterDialogMember,
+  schema: FilterableProperty[],
+  labels: FilterSummaryLabels
+): string => {
+  if (isFilterDialogNode(member)) {
+    const joinWord = member.join === FilterJoinType.OR
+      ? labels.translate('common.joinOr')
+      : labels.translate('common.joinAnd');
+    return `${labels.translate('common.filterGroup')} (${joinWord})`;
+  }
+  // Render the leaf's would-be condition; fall back to an incomplete marker.
+  const emitted = emitLeaf(member, schema);
+  if (!emitted) {
+    const prop = findProperty(schema, member.propertyKey);
+    return prop ? labels.translate(prop.labelKey) : member.propertyKey;
+  }
+  if (isFilterDialogConditionLike(emitted)) {
+    return describeCondition(emitted, schema, labels);
+  }
+  // An enum multi-choice emits an OR group; describe it via the summary path.
+  const summary = summarizeFilterDefinition(emitted, schema, labels);
+  return summary || labels.translate(findProperty(schema, member.propertyKey)?.labelKey ?? member.propertyKey);
+};
+
+/** Narrow the emitLeaf result: a condition carries a string `property`. */
+const isFilterDialogConditionLike = (
+  v: IFilterCondition | IFilterDefinition
+): v is IFilterCondition => typeof (v as IFilterCondition).property === 'string';
diff --git a/src/app/shared/filter-dialog/filter-dialog.component.html b/src/app/shared/filter-dialog/filter-dialog.component.html
new file mode 100644
index 0000000..d38bfe7
--- /dev/null
+++ b/src/app/shared/filter-dialog/filter-dialog.component.html
@@ -0,0 +1,165 @@
+<div *transloco="let t">
+  <h2 mat-dialog-title>{{ t(titleKey) }}</h2>
+  <mat-dialog-content>
+    <div class="fdlg-split" [style.--split-left]="splitLeft() + '%'">
+      <!-- Left pane: condition-tree navigator with an insert/delete toolbar. -->
+      <div class="fdlg-tree-pane">
+        <div class="fdlg-tree-toolbar">
+          <button mat-icon-button type="button" (click)="onInsertCondition()" [disabled]="!canInsertCondition()"
+            [attr.aria-label]="t('common.addCondition')" [title]="t('common.addCondition')">
+            <mat-icon>add</mat-icon>
+          </button>
+          <button mat-icon-button type="button" (click)="onInsertGroup()" [disabled]="!canInsertGroup()"
+            [attr.aria-label]="t('common.addFilterGroup')" [title]="t('common.addFilterGroup')">
+            <mat-icon>playlist_add</mat-icon>
+          </button>
+          <button mat-icon-button type="button" (click)="onDeleteSelected()" [disabled]="!canDeleteSelected()"
+            [attr.aria-label]="t('common.removeFilterGroup')" [title]="t('common.removeFilterGroup')">
+            <mat-icon>delete</mat-icon>
+          </button>
+        </div>
+        <div class="fdlg-tree-scroll">
+          <mat-tree class="fdlg-tree" [dataSource]="treeData()" [childrenAccessor]="childrenAccessor"
+            [trackBy]="trackByMember" [expansionKey]="expansionKeyMember" [attr.aria-label]="t(titleKey)">
+            <!-- One node template for both kinds: leaves simply have no children.
+                 [isExpanded] keeps every group open — the whole expression must
+                 stay visible in a filter editor. -->
+            <mat-nested-tree-node *matTreeNodeDef="let node; let level=level" [isExpanded]="true"
+              (activation)="select(node)">
+              <div class="fdlg-node-row" [class.fdlg-node-selected]="isSelected(node)"
+                [class.fdlg-node-invalid]="isNodeInvalid(node)" [style.margin-left.px]="level * 16"
+                (click)="select(node)">
+                <mat-icon class="fdlg-node-icon">{{ isNode(node) ? 'folder' : 'description' }}</mat-icon>
+                <span class="fdlg-node-label">{{ describeNode(node) }}</span>
+                @if (isNodeInvalid(node)) {
+                  <mat-icon class="fdlg-node-warn" [attr.aria-label]="t('common.filterGroupNeedsTwo')"
+                    [title]="t('common.filterGroupNeedsTwo')">error</mat-icon>
+                }
+              </div>
+              @if (isNode(node)) {
+                <div class="fdlg-tree-children">
+                  <ng-container matTreeNodeOutlet></ng-container>
+                </div>
+              }
+            </mat-nested-tree-node>
+          </mat-tree>
+        </div>
+      </div>
+
+      <!-- Draggable splitter between the panes. -->
+      <div class="fdlg-splitter" role="separator" aria-orientation="vertical" tabindex="0"
+        [attr.aria-label]="t('common.filterSplitter')" (pointerdown)="onSplitPointerDown($event)"
+        (pointermove)="onSplitPointerMove($event)" (pointerup)="onSplitPointerUp($event)"
+        (keydown)="onSplitKeydown($event)"></div>
+
+      <!-- Right pane: editor for the selected tree member. -->
+      <div class="fdlg-detail-pane">
+        @if (selectedMember(); as sel) {
+          @if (isNode(sel)) {
+            <div class="fdlg-detail-title">{{ t('common.filterGroup') }}</div>
+            <p class="fdlg-hint">{{ t('common.filterJoinHint') }}</p>
+            <mat-form-field subscriptSizing="dynamic" class="fdlg-join">
+              <mat-select [ngModel]="sel.join" (ngModelChange)="onJoinChange(sel.id, $event)"
+                [attr.aria-label]="t('common.filterJoinSelect')">
+                @for (join of joinOptions; track join.value) {
+                  <mat-option [value]="join.value">{{ t(join.labelKey) }}</mat-option>
+                }
+              </mat-select>
+            </mat-form-field>
+            @if (isNodeInvalid(sel)) {
+              <p class="fdlg-error">{{ t('common.filterGroupNeedsTwo') }}</p>
+            }
+          } @else if (leafOf(sel); as leaf) {
+            @if (propertyOf(leaf); as prop) {
+              <div class="fdlg-detail-title">{{ t('common.filterCondition') }}</div>
+              <div class="fdlg-condition-row">
+                <mat-form-field subscriptSizing="dynamic" class="fdlg-property">
+                  <mat-select [ngModel]="leaf.propertyKey" (ngModelChange)="onPropertyChange(leaf.id, $event)">
+                    @for (p of properties; track p.key) {
+                      <mat-option [value]="p.key">{{ t(p.labelKey) }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+                <mat-form-field subscriptSizing="dynamic" class="fdlg-operator">
+                  <!-- An enum property's operator is fixed: membership renders as OR-of-equals. -->
+                  <mat-select [ngModel]="leaf.operator" (ngModelChange)="onOperatorChange(leaf.id, $event)"
+                    [disabled]="prop.kind === 'enum'">
+                    @for (op of operatorOptions(prop); track op.value) {
+                      <mat-option [value]="op.value">{{ t(op.labelKey) }}</mat-option>
+                    }
+                  </mat-select>
+                </mat-form-field>
+
+                @switch (valueEditor(prop, leaf.operator)) {
+                  @case ('text') {
+                    <mat-form-field subscriptSizing="dynamic" class="fdlg-text">
+                      <input matInput [ngModel]="scalarToInput(leaf.single)"
+                        (ngModelChange)="onSingleChange(leaf.id, $event)" />
+                    </mat-form-field>
+                  }
+                  @case ('number') {
+                    <mat-form-field subscriptSizing="dynamic" class="fdlg-number">
+                      <input matInput type="number" [min]="prop.numberRange?.min ?? null"
+                        [max]="prop.numberRange?.max ?? null"
+                        [ngModel]="scalarToInput(leaf.single)"
+                        (ngModelChange)="onSingleChange(leaf.id, $event)" />
+                    </mat-form-field>
+                  }
+                  @case ('date') {
+                    <mat-form-field subscriptSizing="dynamic" class="fdlg-date">
+                      <input matInput type="date" [ngModel]="scalarToInput(leaf.single)"
+                        (ngModelChange)="onSingleChange(leaf.id, $event)" />
+                    </mat-form-field>
+                  }
+                  @case ('between') {
+                    <div class="fdlg-between">
+                      <mat-form-field subscriptSizing="dynamic" class="fdlg-between-bound">
+                        <input matInput [type]="betweenInputType(prop)"
+                          [ngModel]="scalarToInput(leaf.between[0])"
+                          (ngModelChange)="onBetweenChange(leaf.id, 0, $event)" />
+                      </mat-form-field>
+                      <span class="fdlg-between-sep" aria-hidden="true">&ndash;</span>
+                      <mat-form-field subscriptSizing="dynamic" class="fdlg-between-bound">
+                        <input matInput [type]="betweenInputType(prop)"
+                          [ngModel]="scalarToInput(leaf.between[1])"
+                          (ngModelChange)="onBetweenChange(leaf.id, 1, $event)" />
+                      </mat-form-field>
+                    </div>
+                  }
+                  @case ('enum') {
+                    <div class="fdlg-choices" role="group" [attr.aria-label]="t(prop.labelKey)">
+                      @for (c of prop.choices ?? []; track c.value) {
+                        <mat-checkbox [checked]="isChoiceSelected(leaf, c.value)"
+                          (change)="onChoiceToggle(leaf.id, c.value, $event.checked)">
+                          {{ t(c.labelKey) }}
+                        </mat-checkbox>
+                      }
+                    </div>
+                  }
+                  @case ('none') {
+                    <!-- Valueless custom operator: no value control at all. -->
+                  }
+                }
+              </div>
+              @if (isLeafMissing(leaf)) {
+                <p class="fdlg-error">{{ t(prop.kind === 'enum' ? 'common.filterEnumNeedsChoice' :
+                  'common.filterNeedsValue') }}</p>
+              }
+            }
+          }
+        } @else {
+          <div class="fdlg-detail-empty">{{ t('common.filterDetailEmpty') }}</div>
+        }
+      </div>
+    </div>
+
+    <div class="fdlg-preview">
+      <span class="fdlg-preview-label">{{ t('common.filterPreview') }}</span>
+      <span class="fdlg-preview-expression">{{ previewExpression() || t('common.filterPreviewEmpty') }}</span>
+    </div>
+  </mat-dialog-content>
+  <mat-dialog-actions>
+    <button mat-button (click)="onCancel()">{{ t('cancel') }}</button>
+    <button mat-button (click)="onSubmit()" cdkFocusInitial [disabled]="!canSubmit()">{{ t('submit') }}</button>
+  </mat-dialog-actions>
+</div>
diff --git a/src/app/shared/filter-dialog/filter-dialog.component.scss b/src/app/shared/filter-dialog/filter-dialog.component.scss
new file mode 100644
index 0000000..d36b79d
--- /dev/null
+++ b/src/app/shared/filter-dialog/filter-dialog.component.scss
@@ -0,0 +1,220 @@
+// Master/detail split: the condition-tree navigator on the left, the editor
+// of the selected member on the right, sized by the draggable splitter.
+.fdlg-split {
+  display: grid;
+  grid-template-columns: var(--split-left, 40%) 8px minmax(0, 1fr);
+  height: 440px;
+}
+
+.fdlg-tree-pane {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.fdlg-tree-toolbar {
+  align-items: center;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
+  display: flex;
+  gap: 4px;
+  padding-bottom: 2px;
+}
+
+.fdlg-tree-scroll {
+  flex: 1 1 auto;
+  overflow: auto;
+  padding-top: 6px;
+}
+
+.fdlg-node-row {
+  align-items: center;
+  border-radius: 6px;
+  cursor: pointer;
+  display: flex;
+  gap: 6px;
+  padding: 4px 8px;
+  user-select: none;
+}
+
+.fdlg-node-row:hover {
+  background: rgba(0, 0, 0, 0.04);
+}
+
+.fdlg-node-selected {
+  background: rgba(0, 0, 0, 0.08);
+}
+
+.fdlg-node-icon {
+  font-size: 18px;
+  height: 18px;
+  opacity: 0.7;
+  width: 18px;
+}
+
+.fdlg-node-label {
+  font-size: 0.9em;
+  overflow-wrap: anywhere;
+}
+
+// Validation: a degenerate group (fewer than two members) is flagged with a
+// warning icon and a reddened label until it branches or is deleted.
+.fdlg-node-invalid .fdlg-node-label {
+  color: #b3261e;
+}
+
+.fdlg-node-warn {
+  color: #b3261e;
+  font-size: 16px;
+  height: 16px;
+  width: 16px;
+}
+
+.fdlg-tree-children {
+  display: block;
+}
+
+// Draggable pane divider.
+.fdlg-splitter {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 2px;
+  cursor: col-resize;
+  justify-self: center;
+  width: 4px;
+}
+
+.fdlg-splitter:hover,
+.fdlg-splitter:focus-visible {
+  background: rgba(0, 0, 0, 0.25);
+  outline: none;
+}
+
+.fdlg-detail-pane {
+  min-width: 0;
+  overflow: auto;
+  padding-left: 12px;
+}
+
+.fdlg-detail-title {
+  font-size: 0.85em;
+  font-weight: 500;
+  margin-bottom: 8px;
+}
+
+.fdlg-detail-empty {
+  font-size: 0.9em;
+  opacity: 0.65;
+}
+
+.fdlg-hint {
+  font-size: 0.78em;
+  margin-bottom: 8px;
+  opacity: 0.65;
+}
+
+.fdlg-error {
+  color: #b3261e;
+  font-size: 0.78em;
+  margin: 6px 0 0;
+}
+
+.fdlg-join {
+  width: 120px;
+}
+
+// Condition editor (the detail pane's leaf editor).
+.fdlg-condition-row {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+
+.fdlg-property {
+  width: 130px;
+}
+
+.fdlg-operator {
+  width: 150px;
+}
+
+.fdlg-text {
+  flex: 1 1 160px;
+}
+
+.fdlg-number {
+  width: 110px;
+}
+
+.fdlg-date {
+  width: 170px;
+}
+
+// Between: two bound inputs with an en-dash between them.
+.fdlg-between {
+  align-items: center;
+  display: flex;
+  gap: 4px;
+}
+
+.fdlg-between-bound {
+  width: 100px;
+}
+
+.fdlg-between-sep {
+  opacity: 0.65;
+}
+
+// Enum multiple-choice editor.
+.fdlg-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 4px 0;
+}
+
+.fdlg-choices mat-checkbox {
+  font-size: 0.9em;
+}
+
+// Live expression preview of the tree being edited.
+.fdlg-preview {
+  align-items: baseline;
+  border-top: 1px solid rgba(0, 0, 0, 0.12);
+  display: flex;
+  font-size: 0.85em;
+  gap: 8px;
+  margin-top: 12px;
+  padding-top: 8px;
+}
+
+.fdlg-preview-label {
+  font-weight: 500;
+  opacity: 0.65;
+  white-space: nowrap;
+}
+
+.fdlg-preview-expression {
+  word-break: break-word;
+}
+
+// Narrow dialogs (small screens): stack the panes, no splitter.
+@media (max-width: 719px) {
+  .fdlg-split {
+    display: flex;
+    flex-direction: column;
+    height: auto;
+  }
+
+  .fdlg-tree-scroll {
+    max-height: 38vh;
+  }
+
+  .fdlg-splitter {
+    display: none;
+  }
+
+  .fdlg-detail-pane {
+    margin-top: 12px;
+    padding-left: 0;
+  }
+}
diff --git a/src/app/shared/filter-dialog/filter-dialog.component.spec.ts b/src/app/shared/filter-dialog/filter-dialog.component.spec.ts
new file mode 100644
index 0000000..b735bd6
--- /dev/null
+++ b/src/app/shared/filter-dialog/filter-dialog.component.spec.ts
@@ -0,0 +1,332 @@
+import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClientTesting } from '@angular/common/http/testing';
+import type { ComponentFixture } from '@angular/core/testing';
+import { TestBed } from '@angular/core/testing';
+import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import {
+  TranslocoService,
+  TRANSLOCO_TRANSPILER,
+  TRANSLOCO_MISSING_HANDLER,
+} from '@jsverse/transloco';
+import { FilterJoinType, FilterOperation } from 'actslib';
+import type { EnumLike, IFilterCondition, IFilterDefinition } from 'actslib';
+import { of } from 'rxjs';
+import { vi } from 'vitest';
+
+
+import type { FilterDialogData, FilterableProperty } from './filter-dialog-model';
+import { SharedFilterDialogComponent } from './filter-dialog.component';
+
+function mockTranslocoService() {
+  return {
+    setActiveLang: vi.fn(),
+    getActiveLang: vi.fn(),
+    selectTranslate: vi.fn().mockReturnValue(of('')),
+    _loadDependencies: vi.fn().mockReturnValue(of(null)),
+    translate: vi.fn((key: string) => key),
+    activeLang: 'en',
+    config: { reRenderOnLangChange: true, prodMode: false },
+    langChanges$: of('en'),
+    events$: of(),
+  };
+}
+
+// Fixture schema mirroring the model spec: a string property with a custom
+// (valueless) operator, a number property, and an enum property.
+const COLOR_VALUES: EnumLike = { red: 'red', blue: 'blue' };
+const IS_PHRASE = {
+  id: 'isPhrase',
+  labelKey: 'test.opIsPhrase',
+  emit: (property: string): IFilterCondition => ({ property, operation: FilterOperation.Contains, lowValue: ' ' }),
+  recognize: (c: IFilterCondition): boolean => c.operation === FilterOperation.Contains && c.lowValue === ' ',
+};
+
+const SCHEMA: FilterableProperty[] = [
+  { key: 'enword', labelKey: 'test.word', kind: 'string', customOperators: [IS_PHRASE],
+    prepareValue: v => String(v).trim().toLowerCase() },
+  { key: 'rating', labelKey: 'test.rating', kind: 'number' },
+  { key: 'color', labelKey: 'test.color', kind: 'enum', enumValues: COLOR_VALUES,
+    choices: [
+      { value: 'red', labelKey: 'test.red' },
+      { value: 'blue', labelKey: 'test.blue' },
+    ] },
+];
+
+describe('SharedFilterDialogComponent', () => {
+  let fixture: ComponentFixture<SharedFilterDialogComponent>;
+  let closeSpy: ReturnType<typeof vi.fn>;
+
+  async function createWith(data: FilterDialogData) {
+    closeSpy = vi.fn();
+    await TestBed.configureTestingModule({
+      imports: [SharedFilterDialogComponent, NoopAnimationsModule],
+      providers: [
+        { provide: MAT_DIALOG_DATA, useValue: data },
+        { provide: MatDialogRef, useValue: { close: closeSpy } },
+        { provide: TranslocoService, useValue: mockTranslocoService() },
+        { provide: TRANSLOCO_TRANSPILER, useValue: {} },
+        { provide: TRANSLOCO_MISSING_HANDLER, useValue: {} },
+        provideHttpClient(),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents();
+    fixture = TestBed.createComponent(SharedFilterDialogComponent);
+  }
+
+  const component = () => fixture.componentInstance;
+  const rootNode = () => component().root();
+  const rows = () => fixture.nativeElement.querySelectorAll('.fdlg-node-row');
+  const toolbarButtons = () =>
+    fixture.nativeElement.querySelectorAll('.fdlg-tree-toolbar button') as NodeListOf<HTMLButtonElement>;
+  const actionButtons = () =>
+    fixture.nativeElement.querySelectorAll('mat-dialog-actions button') as NodeListOf<HTMLButtonElement>;
+
+  const seedDef: IFilterDefinition = {
+    join: FilterJoinType.AND,
+    conditions: [
+      { property: 'enword', operation: FilterOperation.Contains, lowValue: 'app' },
+      {
+        join: FilterJoinType.OR,
+        conditions: [
+          { property: 'rating', operation: FilterOperation.GreaterOrEqual, lowValue: 3 },
+          { property: 'rating', operation: FilterOperation.LessOrEqual, lowValue: 4 },
+        ],
+      },
+    ],
+  };
+
+  /** Click an option inside a mat-select in the detail pane. */
+  function choose(cssClass: string, optionText: string): void {
+    const select: HTMLElement = fixture.nativeElement.querySelector(`${cssClass} mat-select`);
+    expect(select, `select ${cssClass}`).toBeTruthy();
+    select.click();
+    fixture.detectChanges();
+    const option = Array.from(document.querySelectorAll<HTMLElement>('mat-option')).find(
+      o => o.textContent?.includes(optionText)
+    );
+    expect(option, `mat-option containing ${optionText}`).toBeDefined();
+    option?.click();
+    fixture.detectChanges();
+  }
+
+  function typeInto(input: HTMLInputElement, value: string): void {
+    input.value = value;
+    input.dispatchEvent(new Event('input'));
+    fixture.detectChanges();
+  }
+
+  describe('rendering', () => {
+    it('seeds the tree: rows, labels and the root selected in the detail pane', async () => {
+      await createWith({ properties: SCHEMA, root: seedDef });
+      fixture.detectChanges();
+
+      // The seed has root(1) + enword leaf(1) + group(1) + two rating leaves(2) = 5 rows.
+      expect(rows().length).toBe(5);
+      const host: HTMLElement = fixture.nativeElement;
+      const labels = Array.from(host.querySelectorAll<HTMLElement>('.fdlg-node-label'));
+      // Row order: [0] root group, [1] enword leaf, [2] OR group, [3]+[4] its leaves.
+      expect(labels[0].textContent).toContain('common.filterGroup (common.joinAnd)');
+      expect(labels[1].textContent).toContain('test.word common.opContains app');
+      expect(labels[2].textContent?.trim()).toContain('(common.joinOr)');
+      // Root selected initially -> group editor (join select) shows.
+      expect(fixture.nativeElement.querySelector('.fdlg-join')).toBeTruthy();
+    });
+
+    it('re-renders the tree after toolbar inserts (reference trackBy guard)', async () => {
+      await createWith({ properties: SCHEMA, root: seedDef });
+      fixture.detectChanges();
+      expect(rows().length).toBe(5);
+
+      toolbarButtons()[0].click(); // +cond
+      fixture.detectChanges();
+      expect(rows().length).toBe(6);
+
+      toolbarButtons()[1].click(); // +group (root still reachable via the new leaf's parent)
+      fixture.detectChanges();
+      expect(rows().length).toBe(8); // group node + its default row
+    });
+
+    it('renders the live preview uncapped', async () => {
+      await createWith({ properties: SCHEMA, root: seedDef });
+      fixture.detectChanges();
+      const preview = fixture.nativeElement.querySelector('.fdlg-preview-expression').textContent;
+      expect(preview).toContain('test.word common.opContains app');
+      // rating is a numeric property, so its operator renders as a symbol.
+      expect(preview).toContain('(test.rating >= 3');
+    });
+  });
+
+  describe('leaf editing', () => {
+    it('property switch resets the operator and value; the tree label follows', async () => {
+      await createWith({ properties: SCHEMA, root: seedDef });
+      fixture.detectChanges();
+      const wordRow: NodeListOf<HTMLElement> = rows();
+      wordRow[1].click(); // enword leaf
+      fixture.detectChanges();
+
+      choose('.fdlg-property', 'test.rating');
+
+      const leaf = rootNode().members[0];
+      expect('propertyKey' in leaf ? leaf.propertyKey : '').toBe('rating');
+      expect(component().describeNode(leaf)).not.toContain('app');
+      // Root identity changed (the edit flowed through the signal).
+      expect(component().previewExpression()).not.toContain('common.opContains app');
+    });
+
+    it('between shows two inputs and emits both bounds', async () => {
+      await createWith({
+        properties: SCHEMA,
+        root: {
+          join: FilterJoinType.AND,
+          conditions: [
+            { property: 'rating', operation: FilterOperation.GreaterOrEqual, lowValue: 2 },
+            { property: 'rating', operation: FilterOperation.Equal, lowValue: 4 },
+          ],
+        },
+      });
+      fixture.detectChanges();
+      const wordRow: NodeListOf<HTMLElement> = rows();
+      wordRow[1].click(); // first rating leaf
+      fixture.detectChanges();
+
+      choose('.fdlg-operator', 'common.opBetween');
+      const bounds = fixture.nativeElement.querySelectorAll('.fdlg-between-bound input');
+      expect(bounds.length).toBe(2);
+      typeInto(bounds[0], '1');
+      typeInto(bounds[1], '5');
+
+      const leaf = rootNode().members[0];
+      expect('between' in leaf).toBe(true);
+      component().onSubmit();
+      const arg = closeSpy.mock.calls[0][0] as { root: IFilterDefinition };
+      expect(arg.root.conditions[0]).toEqual({
+        property: 'rating',
+        operation: FilterOperation.Between,
+        lowValue: 1,
+        highValue: 5,
+      });
+    });
+
+    it('enum renders checkboxes, multi-select emits an OR-of-Equal group with enumValues', async () => {
+      await createWith({
+        properties: SCHEMA,
+        root: {
+          join: FilterJoinType.AND,
+          conditions: [
+            { property: 'color', operation: FilterOperation.Equal, lowValue: 'red', enumValues: COLOR_VALUES },
+            { property: 'rating', operation: FilterOperation.Equal, lowValue: 4 },
+          ],
+        },
+      });
+      fixture.detectChanges();
+      const firstRow: NodeListOf<HTMLElement> = rows();
+      firstRow[1].click(); // the enum leaf
+      fixture.detectChanges();
+
+      const checkboxes: NodeListOf<HTMLInputElement> = fixture.nativeElement.querySelectorAll('.fdlg-choices input[type=checkbox]');
+      expect(checkboxes.length).toBe(2);
+      expect((checkboxes[0]).checked).toBe(true); // 'red' seeded
+
+      // Check 'blue' too — the leaf now holds a two-value selection.
+      checkboxes[1].click();
+      fixture.detectChanges();
+      const leaf = rootNode().members[0];
+      expect('choices' in leaf ? leaf.choices : []).toEqual(['red', 'blue']);
+
+      component().onSubmit();
+      const arg = closeSpy.mock.calls[0][0] as { root: IFilterDefinition };
+      const group = arg.root.conditions[0] as IFilterDefinition;
+      expect(group.join).toBe(FilterJoinType.OR);
+      expect((group.conditions as IFilterCondition[]).map(c => c.lowValue)).toEqual(['red', 'blue']);
+      expect((group.conditions as IFilterCondition[])[0].enumValues).toBe(COLOR_VALUES);
+    });
+
+    it('custom operator hides the value editor and stays submittable', async () => {
+      await createWith({ properties: SCHEMA, root: seedDef });
+      fixture.detectChanges();
+      const firstRow: NodeListOf<HTMLElement> = rows();
+      firstRow[1].click(); // enword leaf (has the custom op)
+      fixture.detectChanges();
+
+      choose('.fdlg-operator', 'test.opIsPhrase');
+
+      expect(fixture.nativeElement.querySelector('.fdlg-text input')).toBeNull();
+      const leaf = rootNode().members[0];
+      expect('operator' in leaf ? leaf.operator : '').toBe('isPhrase');
+      expect(component().canSubmit()).toBe(true); // valueless -> never missing
+    });
+
+    it('edits flow through the root signal (ancestor objects are replaced)', async () => {
+      await createWith({ properties: SCHEMA, root: seedDef });
+      const before = rootNode();
+      const groupBefore = before.members[1];
+      expect('members' in groupBefore).toBe(true);
+
+      component().onJoinChange((groupBefore as { id: number }).id, FilterJoinType.AND);
+      expect(rootNode()).not.toBe(before);
+      const groupAfter = rootNode().members[1];
+      expect(groupAfter).not.toBe(groupBefore);
+      expect('join' in groupAfter ? groupAfter.join : '').toBe(FilterJoinType.AND);
+    });
+  });
+
+  describe('validation and submit', () => {
+    it('submit button reads t(submit) and tracks canSubmit live', async () => {
+      await createWith({ properties: SCHEMA, root: seedDef });
+      fixture.detectChanges();
+      const submit = actionButtons()[1];
+      expect(submit.textContent?.trim()).toBe('submit'); // mocked transloco answers with the key
+      expect(submit.disabled).toBe(false);
+
+      // Select the word leaf and wipe its text -> missing value -> Submit
+      // disabled and the hint shown in the detail pane.
+      (rows() as NodeListOf<HTMLElement>)[1].click();
+      fixture.detectChanges();
+      const input: HTMLInputElement = fixture.nativeElement.querySelector('.fdlg-text input');
+      typeInto(input, '   ');
+      expect(submit.disabled).toBe(true);
+      expect(fixture.nativeElement.querySelector('.fdlg-error').textContent).toContain('common.filterNeedsValue');
+    });
+
+    it('an empty nested group is flagged and blocks submit; the root is exempt', async () => {
+      await createWith({
+        properties: SCHEMA,
+        root: { join: FilterJoinType.AND, conditions: [{ property: 'rating', operation: FilterOperation.Equal, lowValue: 2 }] },
+      });
+      fixture.detectChanges();
+
+      // Insert a group (starts with one row, so it is already invalid).
+      toolbarButtons()[1].click();
+      fixture.detectChanges();
+      expect(actionButtons()[1].disabled).toBe(true);
+      expect(fixture.nativeElement.querySelector('.fdlg-node-invalid')).toBeTruthy();
+    });
+
+    it('onSubmit closes with the emitted definition; onCancel closes undefined', async () => {
+      await createWith({ properties: SCHEMA, root: seedDef });
+      fixture.detectChanges();
+      component().onSubmit();
+      const arg = closeSpy.mock.calls[0][0] as { root: IFilterDefinition };
+      expect(arg.root.join).toBe(FilterJoinType.AND);
+      expect(arg.root.conditions.length).toBe(2);
+      // prepareValue folded the string condition at emit time.
+      expect((arg.root.conditions[0] as IFilterCondition).lowValue).toBe('app');
+
+      closeSpy.mockClear();
+      component().onCancel();
+      expect(closeSpy).toHaveBeenCalledWith();
+    });
+
+    it('the depth cap disables +group below the configured maximum', async () => {
+      await createWith({ properties: SCHEMA, root: seedDef, maxDepth: 2 });
+      fixture.detectChanges();
+      // Select the nested group (level 2): inserting another group would exceed the cap.
+      const firstRow: NodeListOf<HTMLElement> = rows();
+      firstRow[2].click();
+      fixture.detectChanges();
+      expect(component().canInsertGroup()).toBe(false);
+      expect(toolbarButtons()[1].disabled).toBe(true);
+    });
+  });
+});
diff --git a/src/app/shared/filter-dialog/filter-dialog.component.ts b/src/app/shared/filter-dialog/filter-dialog.component.ts
new file mode 100644
index 0000000..7067ae7
--- /dev/null
+++ b/src/app/shared/filter-dialog/filter-dialog.component.ts
@@ -0,0 +1,458 @@
+import { ChangeDetectionStrategy, Component, computed, inject, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogActions,
+  MatDialogContent,
+  MatDialogRef,
+  MatDialogTitle,
+} from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatSelectModule } from '@angular/material/select';
+import { MatTree, MatTreeNodeDef, MatTreeNodeOutlet, MatNestedTreeNode } from '@angular/material/tree';
+import { TranslocoModule, TranslocoService } from '@jsverse/transloco';
+import { FilterJoinType } from 'actslib';
+
+import {
+  appendMember,
+  describeMember,
+  emitTree,
+  emptyLeaf,
+  effectiveOperators,
+  FILTER_OPERATION_LABEL_KEYS,
+  findMember,
+  findProperty,
+  isFilterDialogNode,
+  mutateNode,
+  parentIdOf,
+  removeMember,
+  replaceLeaf,
+  seedTree,
+  summarizeFilterDefinition,
+  validateTree,
+  valueEditorFor,
+  depthOf,
+} from './filter-dialog-model';
+import type { FilterSummaryLabels } from './filter-dialog-model';
+import type {
+  FilterDialogData,
+  FilterDialogResult,
+  FilterableProperty,
+  FilterPropertyKind,
+  FilterScalar,
+  FilterValueEditor,
+  SharedFilterDialogLeaf,
+  SharedFilterDialogMember,
+  SharedFilterDialogNode,
+} from './filter-dialog-model';
+
+/**
+ * Project-wide filter condition editor (docs/reusable-filter-dialog-design.md):
+ * pages pass a `FilterableProperty[]` schema plus the actslib
+ * `IFilterDefinition` in effect, and get an edited definition back on Submit
+ * (`undefined` on Cancel/backdrop/Esc — the caller keeps its previous filter).
+ *
+ * The layout follows the vocabulary filter dialog it generalizes: a
+ * `mat-tree` navigator (left) renders the condition tree, the detail pane
+ * (right) edits the selected member — a group's AND/OR join, or a leaf's
+ * property / operator / value (the value editor dispatches by kind:
+ * text, number, date, Between's two inputs, or the enum multiple-choice list,
+ * with valueless custom operators) — and a draggable splitter sizes the panes.
+ * Insert/delete live in a toolbar above the tree and target the selection;
+ * Submit stays disabled while validation fails (missing values, nested groups
+ * with fewer than two members — root exempt, flagged in the tree).
+ *
+ * CDK invariants this component relies on (§6.3 of the design — do not
+ * "simplify"): `[trackBy]` is object REFERENCE (nested children are read once
+ * per view, so replaced nodes must re-create), `[expansionKey]` is the editor
+ * id with `[isExpanded]="true"` (always-open survives re-creation), and every
+ * edit replaces objects through the `root` signal — in-place writes would not
+ * dirty the OnPush view and would leave labels/preview stale.
+ */
+@Component({
+  selector: 'app-filter-dlg',
+  templateUrl: 'filter-dialog.component.html',
+  styleUrl: 'filter-dialog.component.scss',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  imports: [
+    FormsModule,
+    MatButtonModule,
+    MatCheckboxModule,
+    MatIconModule,
+    MatDialogTitle,
+    MatDialogContent,
+    MatDialogActions,
+    MatFormFieldModule,
+    MatInputModule,
+    MatSelectModule,
+    MatTree,
+    MatNestedTreeNode,
+    MatTreeNodeDef,
+    MatTreeNodeOutlet,
+    TranslocoModule,
+  ],
+})
+export class SharedFilterDialogComponent {
+  readonly dialogRef = inject(MatDialogRef<SharedFilterDialogComponent, FilterDialogResult>);
+  private readonly transloco = inject(TranslocoService);
+
+  // Field initializers run in declaration order — `root`'s reads everything
+  // above it (`data`, `newId`) and `selectedId` reads `root`.
+  readonly data = inject<FilterDialogData>(MAT_DIALOG_DATA);
+  private nextId = 1;
+  private readonly newId = (): number => this.nextId++;
+  readonly properties = this.data.properties;
+  readonly maxDepth = this.data.maxDepth ?? 4;
+  readonly titleKey = this.data.titleKey ?? 'common.editFilter';
+  readonly root = signal<SharedFilterDialogNode>(seedTree(this.data.root, this.data.properties, this.newId));
+  readonly selectedId = signal<number>(this.root().id);
+
+  /** Labeler for the model's renderers (tree rows + preview). */
+  private readonly labels: FilterSummaryLabels = {
+    translate: key => this.transloco.translate(key),
+  };
+
+  /** Options for the group join select. */
+  readonly joinOptions: { value: string; labelKey: string }[] = [
+    { value: FilterJoinType.AND, labelKey: 'common.joinAnd' },
+    { value: FilterJoinType.OR, labelKey: 'common.joinOr' },
+  ];
+
+  // --- mat-tree wiring (see the CDK invariants in the class doc) ------------
+
+  /** Top-level rows of the navigator; a new array only when the tree changes. */
+  readonly treeData = computed(() => [this.root()]);
+
+  readonly childrenAccessor = (member: SharedFilterDialogMember): SharedFilterDialogMember[] =>
+    isFilterDialogNode(member) ? member.members : [];
+
+  /** Row-differencing identity: the object REFERENCE, not the id. */
+  readonly trackByMember = (_index: number, member: SharedFilterDialogMember): SharedFilterDialogMember => member;
+
+  /** Expansion ids survive immutable replacement so the tree stays open. */
+  readonly expansionKeyMember = (member: SharedFilterDialogMember): number => member.id;
+
+  // --- Splitter --------------------------------------------------------------
+
+  /** Left pane width as a percentage of the split area. */
+  readonly splitLeft = signal(40);
+  readonly splitMin = 25;
+  readonly splitMax = 65;
+  private splitRect: DOMRect | null = null;
+
+  // --- Selection -------------------------------------------------------------
+
+  select(member: SharedFilterDialogMember): void {
+    this.selectedId.set(member.id);
+  }
+
+  isSelected(member: SharedFilterDialogMember): boolean {
+    return member.id === this.selectedId();
+  }
+
+  memberById(memberId: number): SharedFilterDialogMember | null {
+    const root = this.root();
+    return root.id === memberId ? root : findMember(root, memberId);
+  }
+
+  /** Member currently reflected in the detail pane. */
+  selectedMember(): SharedFilterDialogMember | null {
+    return this.memberById(this.selectedId());
+  }
+
+  /** True when the selection is not the root (which can never be deleted). */
+  canDeleteSelected(): boolean {
+    const selected = this.selectedMember();
+    return selected !== null && selected.id !== this.root().id;
+  }
+
+  /**
+   * The group that accepts toolbar inserts: the selected group itself, or the
+   * parent of the selected leaf; null when nothing is selected.
+   */
+  insertTargetId(): number | null {
+    const selected = this.selectedMember();
+    if (!selected) {
+      return null;
+    }
+    return isFilterDialogNode(selected) ? selected.id : parentIdOf(this.root(), selected.id);
+  }
+
+  canInsertCondition(): boolean {
+    return this.insertTargetId() !== null && this.properties.length > 0;
+  }
+
+  /** Respects the depth cap: no new group at the deepest allowed level. */
+  canInsertGroup(): boolean {
+    const targetId = this.insertTargetId();
+    if (targetId === null || this.properties.length === 0) {
+      return false;
+    }
+    const target = this.memberById(targetId);
+    return !!target && isFilterDialogNode(target) && this.canAddGroup(target);
+  }
+
+  private canAddGroup(node: SharedFilterDialogNode): boolean {
+    return depthOf(this.root(), node.id, 1) < this.maxDepth;
+  }
+
+  /** Insert a blank condition (first property) into the target group and select it. */
+  onInsertCondition(): void {
+    const targetId = this.insertTargetId();
+    const first = this.properties[0];
+    if (targetId === null || !first) {
+      return;
+    }
+    const leaf = emptyLeaf(first, this.newId);
+    this.root.update(root => appendMember(root, targetId, leaf));
+    this.selectedId.set(leaf.id);
+  }
+
+  /** Insert an OR-joined group (one default condition) into the target group and select it. */
+  onInsertGroup(): void {
+    const targetId = this.insertTargetId();
+    const first = this.properties[0];
+    if (targetId === null || !first) {
+      return;
+    }
+    const target = this.memberById(targetId);
+    if (!target || !isFilterDialogNode(target) || !this.canAddGroup(target)) {
+      return;
+    }
+    const group: SharedFilterDialogNode = {
+      id: this.newId(),
+      join: FilterJoinType.OR,
+      members: [emptyLeaf(first, this.newId)],
+    };
+    this.root.update(root => appendMember(root, targetId, group));
+    this.selectedId.set(group.id);
+  }
+
+  /** Delete the selected member (leaf, or group with its subtree); selection moves to the parent. */
+  onDeleteSelected(): void {
+    const selected = this.selectedMember();
+    if (!selected || selected.id === this.root().id) {
+      return;
+    }
+    const parentId = parentIdOf(this.root(), selected.id);
+    if (parentId === null) {
+      return;
+    }
+    this.root.update(root => removeMember(root, selected.id));
+    this.selectedId.set(parentId);
+  }
+
+  // --- Detail-pane edits (immutable, through the root signal) ---------------
+
+  onJoinChange(nodeId: number, join: FilterJoinType): void {
+    this.root.update(root => mutateNode(root, nodeId, node => ({ ...node, join })));
+  }
+
+  /** Property switch: resets operator to the new property's default and clears values. */
+  onPropertyChange(leafId: number, key: string): void {
+    const prop = findProperty(this.properties, key);
+    if (!prop) {
+      return;
+    }
+    // Reuse the leaf id so selection/expansion survive the swap.
+    this.root.update(root => replaceLeaf(root, leafId, emptyLeaf(prop, () => leafId)));
+  }
+
+  onOperatorChange(leafId: number, operator: string): void {
+    this.patchLeaf(leafId, leaf => ({ ...leaf, operator }));
+  }
+
+  onSingleChange(leafId: number, raw: unknown): void {
+    this.patchLeaf(leafId, leaf => {
+      const prop = findProperty(this.properties, leaf.propertyKey);
+      return { ...leaf, single: this.toScalar(raw, prop?.kind ?? 'string') };
+    });
+  }
+
+  onBetweenChange(leafId: number, which: 0 | 1, raw: unknown): void {
+    this.patchLeaf(leafId, leaf => {
+      const prop = findProperty(this.properties, leaf.propertyKey);
+      const value = this.toScalar(raw, prop?.kind ?? 'string');
+      const between: [FilterScalar | null, FilterScalar | null] = [
+        which === 0 ? value : leaf.between[0],
+        which === 1 ? value : leaf.between[1],
+      ];
+      return { ...leaf, between };
+    });
+  }
+
+  onChoiceToggle(leafId: number, value: string | number, checked: boolean): void {
+    this.patchLeaf(leafId, leaf => ({
+      ...leaf,
+      choices: checked ? [...leaf.choices, value] : leaf.choices.filter(v => v !== value),
+    }));
+  }
+
+  private patchLeaf(
+    leafId: number,
+    patch: (leaf: SharedFilterDialogLeaf) => SharedFilterDialogLeaf
+  ): void {
+    this.root.update(root => {
+      const member = findMember(root, leafId);
+      return member && !isFilterDialogNode(member) ? replaceLeaf(root, leafId, patch(member)) : root;
+    });
+  }
+
+  // --- Template helpers -------------------------------------------------------
+
+  isNode(member: SharedFilterDialogMember): member is SharedFilterDialogNode {
+    return isFilterDialogNode(member);
+  }
+
+  /** Leaf view for the detail pane (null for a group; type-narrows in @if). */
+  leafOf(member: SharedFilterDialogMember): SharedFilterDialogLeaf | null {
+    return isFilterDialogNode(member) ? null : member;
+  }
+
+  propertyOf(leaf: SharedFilterDialogLeaf): FilterableProperty | undefined {
+    return findProperty(this.properties, leaf.propertyKey);
+  }
+
+  /** Operator options for a property: the valued operators, then custom ones. */
+  operatorOptions(prop: FilterableProperty): { value: string; labelKey: string }[] {
+    return [
+      ...effectiveOperators(prop).map(op => ({ value: op, labelKey: FILTER_OPERATION_LABEL_KEYS[op] })),
+      ...(prop.customOperators?.map(c => ({ value: c.id, labelKey: c.labelKey })) ?? []),
+    ];
+  }
+
+  valueEditor(prop: FilterableProperty, operator: string): FilterValueEditor {
+    return valueEditorFor(prop, operator);
+  }
+
+  /** Input type for a Between bound (the two inputs follow the property kind). */
+  betweenInputType(prop: FilterableProperty): 'number' | 'date' | 'text' {
+    return prop.kind === 'number' ? 'number' : prop.kind === 'date' ? 'date' : 'text';
+  }
+
+  isChoiceSelected(leaf: SharedFilterDialogLeaf, value: string | number): boolean {
+    return leaf.choices.includes(value);
+  }
+
+  /** Tree-row label: group phrase or condition summary (model renderer). */
+  describeNode(member: SharedFilterDialogMember): string {
+    return describeMember(member, this.properties, this.labels);
+  }
+
+  /** Live preview: exactly what Submit will apply (incomplete rows skipped). */
+  previewExpression(): string {
+    return summarizeFilterDefinition(
+      emitTree(this.root(), this.properties),
+      this.properties,
+      this.labels
+    );
+  }
+
+  // --- Validation (Submit gate) -----------------------------------------------
+
+  readonly validation = computed(() => validateTree(this.root(), this.properties));
+  readonly canSubmit = computed(() => this.validation().canSubmit);
+
+  /** Invalid nested group (fewer than two members) — for tree flagging. */
+  isNodeInvalid(member: SharedFilterDialogMember): boolean {
+    return isFilterDialogNode(member) && this.validation().invalidGroupIds.includes(member.id);
+  }
+
+  /** Leaf missing its value — for the detail-pane hint. */
+  isLeafMissing(leaf: SharedFilterDialogLeaf): boolean {
+    return this.validation().missingValueIds.includes(leaf.id);
+  }
+
+  // --- Value conversion (leaf slot <-> native input strings) ------------------
+
+  toScalar(raw: unknown, kind: FilterPropertyKind): FilterScalar | null {
+    if (raw === null || raw === undefined || raw === '') {
+      return null;
+    }
+    if (kind === 'number') {
+      const n = Number(raw);
+      return Number.isFinite(n) ? n : null;
+    }
+    if (kind === 'date') {
+      const d = raw instanceof Date ? raw : new Date(String(raw));
+      return Number.isNaN(d.getTime()) ? null : d;
+    }
+    return String(raw);
+  }
+
+  scalarToInput(value: FilterScalar | null): string {
+    if (value === null || value === undefined) {
+      return '';
+    }
+    if (value instanceof Date) {
+      const pad = (n: number): string => String(n).padStart(2, '0');
+      return `${value.getFullYear()}-${pad(value.getMonth() + 1)}-${pad(value.getDate())}`;
+    }
+    return String(value);
+  }
+
+  // --- Splitter ----------------------------------------------------------------
+
+  onSplitPointerDown(event: PointerEvent): void {
+    const splitter = event.currentTarget as HTMLElement;
+    const pane = splitter.parentElement;
+    if (!pane) {
+      return;
+    }
+    this.splitRect = pane.getBoundingClientRect();
+    splitter.setPointerCapture(event.pointerId);
+  }
+
+  onSplitPointerMove(event: PointerEvent): void {
+    if (!this.splitRect) {
+      return;
+    }
+    const percent = ((event.clientX - this.splitRect.left) / this.splitRect.width) * 100;
+    this.splitLeft.set(this.clampSplit(percent));
+  }
+
+  onSplitPointerUp(event: PointerEvent): void {
+    this.splitRect = null;
+    const splitter = event.currentTarget as HTMLElement;
+    if (splitter.hasPointerCapture(event.pointerId)) {
+      splitter.releasePointerCapture(event.pointerId);
+    }
+  }
+
+  /** Keyboard resizing: arrows nudge, Home/End jump to the clamps. */
+  onSplitKeydown(event: KeyboardEvent): void {
+    let next: number | null = null;
+    if (event.key === 'ArrowLeft') {
+      next = this.splitLeft() - 2;
+    } else if (event.key === 'ArrowRight') {
+      next = this.splitLeft() + 2;
+    } else if (event.key === 'Home') {
+      next = this.splitMin;
+    } else if (event.key === 'End') {
+      next = this.splitMax;
+    }
+    if (next !== null) {
+      event.preventDefault();
+      this.splitLeft.set(this.clampSplit(next));
+    }
+  }
+
+  private clampSplit(percent: number): number {
+    return Math.min(this.splitMax, Math.max(this.splitMin, percent));
+  }
+
+  // --- Dialog lifecycle ---------------------------------------------------------
+
+  onCancel(): void {
+    this.dialogRef.close();
+  }
+
+  /** Emit the edited tree as an actslib definition (validation gated the button). */
+  onSubmit(): void {
+    this.dialogRef.close({ root: emitTree(this.root(), this.properties) });
+  }
+}
diff --git a/src/app/shared/filter-dialog/index.ts b/src/app/shared/filter-dialog/index.ts
new file mode 100644
index 0000000..e12b67a
--- /dev/null
+++ b/src/app/shared/filter-dialog/index.ts
@@ -0,0 +1,6 @@
+// Public surface of the shared filter dialog (see
+// docs/reusable-filter-dialog-design.md). Pages import the component (to open
+// it) plus the schema types; the model functions are exported for pages that
+// want the summary (menu labels) or round-trip helpers.
+export * from './filter-dialog-model';
+export { SharedFilterDialogComponent } from './filter-dialog.component';
diff --git a/src/app/shared/utils/shuffle.spec.ts b/src/app/shared/utils/shuffle.spec.ts
new file mode 100644
index 0000000..c7695e1
--- /dev/null
+++ b/src/app/shared/utils/shuffle.spec.ts
@@ -0,0 +1,34 @@
+import { pickWeighted } from './shuffle';
+
+describe('shuffle utils', () => {
+  describe('pickWeighted', () => {
+    // Weights 3, 5, 9 (total 17).
+    const items = ['aaa', 'bbbbb', 'ccccccccc'];
+
+    it('returns undefined for an empty list', () => {
+      expect(pickWeighted([], () => 1)).toBeUndefined();
+    });
+
+    it('maps rolls onto weight-proportional boundaries', () => {
+      // roll = random * 17: [0,3) -> first, [3,8) -> second, [8,17) -> third.
+      expect(pickWeighted(items, i => i.length, () => 0)).toBe('aaa');
+      expect(pickWeighted(items, i => i.length, () => 0.17)).toBe('aaa');
+      expect(pickWeighted(items, i => i.length, () => 0.18)).toBe('bbbbb');
+      expect(pickWeighted(items, i => i.length, () => 0.46)).toBe('bbbbb');
+      expect(pickWeighted(items, i => i.length, () => 0.48)).toBe('ccccccccc');
+      expect(pickWeighted(items, i => i.length, () => 0.9999)).toBe('ccccccccc');
+    });
+
+    it('favors heavier items over repeated draws', () => {
+      const counts = new Map<string, number>();
+      for (let i = 0; i < 600; i++) {
+        const pick = pickWeighted(items, x => x.length)!;
+        counts.set(pick, (counts.get(pick) ?? 0) + 1);
+      }
+
+      // Expected counts: ~317 / ~176 / ~106 — ordering must hold, by a wide margin.
+      expect(counts.get('ccccccccc')!).toBeGreaterThan(counts.get('bbbbb')!);
+      expect(counts.get('bbbbb')!).toBeGreaterThan(counts.get('aaa')!);
+    });
+  });
+});
diff --git a/src/app/shared/utils/shuffle.ts b/src/app/shared/utils/shuffle.ts
index 9c49dc5..516ac12 100644
--- a/src/app/shared/utils/shuffle.ts
+++ b/src/app/shared/utils/shuffle.ts
@@ -1,12 +1,24 @@
 /**
- * Fisher-Yates (Knuth) shuffle — produces an unbiased uniform random permutation.
- * Returns a NEW array; the input is not mutated.
+ * Weighted random pick: an item's chance of being chosen is proportional to
+ * its weight. `random` returns [0, 1) and is injectable for tests. Returns
+ * undefined for an empty list; a list whose weights are all 0 yields the last
+ * item.
  */
-export function fisherYatesShuffle<T>(array: readonly T[]): T[] {
-  const result = array.slice();
-  for (let i = result.length - 1; i > 0; i--) {
-    const j = Math.floor(Math.random() * (i + 1));
-    [result[i], result[j]] = [result[j], result[i]];
+export function pickWeighted<T>(
+  items: readonly T[],
+  weight: (item: T) => number,
+  random: () => number = Math.random
+): T | undefined {
+  if (items.length === 0) {
+    return undefined;
   }
-  return result;
+  const total = items.reduce((sum, item) => sum + weight(item), 0);
+  let roll = random() * total;
+  for (const item of items) {
+    roll -= weight(item);
+    if (roll < 0) {
+      return item;
+    }
+  }
+  return items[items.length - 1];
 }
diff --git a/src/assets/data/i18n/en.json b/src/assets/data/i18n/en.json
index b799c57..ede750c 100644
--- a/src/assets/data/i18n/en.json
+++ b/src/assets/data/i18n/en.json
@@ -1,128 +1,29 @@
 {
   "welcome": "Welcome",
-  "language": "Language",
-  "english": "English",
   "chinese": "Chinese",
-  "home": "Home",
-  "about": "About",
-  "contact": "Contact",
-  "settings": "Settings",
+  "english": "English",
   "logout": "Logout",
   "login": "Login",
   "menu": "Menu",
-  "register": "Register",
-  "username": "Username",
-  "password": "Password",
-  "email": "Email",
-  "remember_me": "Remember Me",
-  "forgot_password": "Forgot Password?",
-  "confirm_password": "Confirm Password",
-  "already_have_account": "Already have an account?",
-  "dont_have_account": "Don't have an account?",
-  "sign_up": "Sign Up",
-  "sign_in": "Sign In",
-  "dashboard": "Dashboard",
-  "profile": "Profile",
   "user_detail": "User Detail",
   "user_id": "User ID",
   "user_name": "User Name",
-  "search": "Search",
   "cancel": "Cancel",
-  "save": "Save",
-  "delete": "Delete",
-  "edit": "Edit",
-  "view": "View",
-  "create": "Create",
-  "update": "Update",
   "close": "Close",
-  "yes": "Yes",
   "no": "No",
   "ok": "OK",
-  "back": "Back",
   "next": "Next",
   "previous": "Previous",
-  "more": "More",
-  "less": "Less",
-  "all": "All",
   "none": "None",
   "error": "Error",
-  "success": "Success",
   "loading": "Loading...",
-  "please_wait": "Please wait...",
-  "try_again": "Try Again",
-  "no_data_found": "No data found",
-  "search_results": "Search Results",
-  "no_results": "No results found",
-  "results_count": "{{count}} results",
   "page_not_found": "Page Not Found",
-  "something_went_wrong": "Something went wrong",
-  "server_error": "Server Error",
-  "network_error": "Network Error",
-  "invalid_input": "Invalid Input",
   "required_field": "This field is required",
-  "min_length": "Minimum length is {{min}} characters",
-  "max_length": "Maximum length is {{max}} characters",
-  "email_invalid": "Please enter a valid email address",
-  "password_mismatch": "Passwords do not match",
-  "learn_chinese": "Learn Chinese",
-  "learn_english": "Learn English",
   "knowledge_bank": "Knowledge Bank",
-  "translate_exercises": "Translate Exercises",
-  "math_exercises": "Math Exercises",
-  "calendar": "Calendar",
-  "audio_player": "Audio Player",
-  "video_player": "Video Player",
-  "document_viewer": "Document Viewer",
-  "image_gallery": "Image Gallery",
   "quiz": "Quiz",
-  "exam": "Exam",
-  "practice": "Practice",
   "review": "Review",
-  "progress": "Progress",
-  "statistics": "Statistics",
-  "reports": "Reports",
-  "analytics": "Analytics",
-  "notifications": "Notifications",
-  "messages": "Messages",
-  "chat": "Chat",
-  "video_call": "Video Call",
-  "screen_share": "Screen Share",
-  "whiteboard": "Whiteboard",
-  "calendar_event": "Calendar Event",
-  "schedule": "Schedule",
-  "appointment": "Appointment",
-  "meeting": "Meeting",
-  "reminder": "Reminder",
-  "task": "Task",
-  "project": "Project",
-  "team": "Team",
-  "collaboration": "Collaboration",
-  "resources": "Resources",
-  "documents": "Documents",
   "files": "Files",
-  "upload": "Upload",
-  "download": "Download",
-  "share": "Share",
-  "copy_link": "Copy Link",
   "print": "Print",
-  "export": "Export",
-  "import": "Import",
-  "backup": "Backup",
-  "restore": "Restore",
-  "settings_saved": "Settings saved successfully",
-  "changes_saved": "Changes saved successfully",
-  "item_deleted": "Item deleted successfully",
-  "item_created": "Item created successfully",
-  "item_updated": "Item updated successfully",
-  "upload_success": "File uploaded successfully",
-  "upload_failed": "File upload failed",
-  "download_failed": "File download failed",
-  "connection_lost": "Connection lost",
-  "reconnecting": "Reconnecting...",
-  "connected": "Connected",
-  "disconnected": "Disconnected",
-  "offline": "Offline",
-  "online": "Online",
   "skip_to_main_content": "Skip to main content",
   "knowledge_builder": "Knowledge Builder",
   "vocabulary": "Vocabulary",
@@ -158,24 +59,76 @@
   "join_thousands_of_learners": "Join thousands of learners who have transformed their study habits with our intelligent platform.",
   "get_started": "Get Started",
   "explore_features": "Explore Features",
-  "chineseExercises": {
-    "title": "Chinese",
+  "common": {
+    "addCondition": "Add condition",
+    "addFilterGroup": "Add group",
     "author": "Author",
-    "defaultFormTitle": "Chinese Exercises",
+    "clearSelection": "Clear Selection",
+    "correct": "Correct",
+    "disableVoice": "Disable Voice",
+    "editContentFilter": "Content filter",
+    "editFilter": "Filter",
+    "filterCondition": "Condition",
+    "filterDetailEmpty": "Select a tree node to edit it",
+    "filterEnumNeedsChoice": "Select at least one value",
+    "filterGroup": "Condition group",
+    "filterGroupNeedsTwo": "A non-root condition group needs at least two members",
+    "filterJoinHint": "Connects the conditions and groups below",
+    "filterJoinSelect": "Join conditions with",
+    "filterNeedsValue": "Value is required",
+    "filterPreview": "Expression",
+    "filterPreviewEmpty": "No conditions",
+    "filterSplitter": "Resize the tree and detail panes",
+    "editRatingFilter": "Rating filter",
+    "enableAutoMode": "Enable Auto Mode",
+    "execDateOption": "Exec. Date Option",
+    "exercises": "Exercises",
+    "explanation": "Explanation",
+    "extraInfo": "Extra Info",
+    "filterClear": "Clear",
+    "filteredItems": "Filtered",
+    "filterNew": "New",
+    "filterTextRequired": "Text is required",
+    "incorrect": "Incorrect",
+    "joinAnd": "AND",
+    "joinOr": "OR",
+    "next": "Next",
+    "nextQuestion": "Next Question",
+    "opBetween": "Between",
+    "opContains": "Contains",
+    "opEndsWith": "Ends with",
+    "opEqual": "Equal",
+    "opGreaterOrEqual": "Greater or equal",
+    "opGreaterThan": "Greater than",
+    "opLessOrEqual": "Less or equal",
+    "opLessThan": "Less than",
+    "opStartsWith": "Starts with",
+    "optionsOfQuiz": "Options of Quiz",
+    "optionsOfReview": "Options of Review",
+    "previous": "Previous",
+    "previousQuestion": "Previous Question",
+    "quickSelection": "Selection",
+    "removeFilterGroup": "Remove group",
+    "quit": "Quit",
+    "randomSelect": "Select Randomly",
+    "score": "Score",
+    "selectAllVisible": "Select All Visible",
+    "sequenceSelect": "Select Sequentially",
+    "start": "Start",
+    "subTitle": "Sub-Title",
+    "title": "Title"
+  },
+  "chineseExercises": {
     "optionsOfReciting": "Options of Chinese Reciting",
     "level": "Level",
     "answerLineBreak": "One Answer per Line",
-    "execDateOption": "Exec. Date Option"
+    "allowEmptyAnswer": "Allow Empty Answer",
+    "recite": "Recite"
   },
   "formulaRecites": {
-    "title": "Formula",
-    "defaultFormTitle": "Formula Exercises",
-    "column": "Column",
     "name": "Name",
     "math": "Math",
     "value": "Value",
-    "subTitle": "Sub-Title",
-    "execDateOption": "Exec Date Option",
     "printSource": "Print Source",
     "printItemWithRandomOrder": "Print Item with Random Order",
     "generateQuiz": "Generate Quiz",
@@ -183,8 +136,6 @@
     "aiRequestFailed": "AI request failed. Please try again later."
   },
   "englishListening": {
-    "pageTitle": "Listening",
-    "columnTitle": "Title",
     "sections": "Sections",
     "openSection": "Open Section",
     "supplementary": "Supplementary",
@@ -193,12 +144,10 @@
     "section": "Section",
     "countOfExercises": "Count of Exercises",
     "openDetail": "Open Detail",
-    "vocabularyColumn": "Vocabulary",
     "displayVocabulary": "Display Vocabulary",
     "playSection": "Play Section",
     "returnToSectionList": "Return to Section List",
     "itemCollection": "Item/Collection",
-    "startExercise": "Start",
     "previousItem": "Previous Item",
     "nextItem": "Next Item",
     "playAudio": "Play Audio",
@@ -212,113 +161,72 @@
     "expected": "Expected"
   },
   "knowledgeExercises": {
-    "title": "Knowledge Bank",
     "detailV2Title": "Knowledge Bank - Exercise Detail V2",
-    "type": "Type",
     "tags": "Tags",
-    "refTo": "Ref To",
     "difficulty": "Difficulty",
     "estTime": "Est. Time (min)",
-    "extraInfo": "Extra Info",
     "detail": "Detail",
-    "previous": "Previous",
-    "next": "Next",
     "toggleHintOfAnswer": "Toggle Hint of Answer",
     "answer": "Answer",
     "optionsOfKnowledgeExercises": "Options of Knowledge Exercises",
-    "titleOption": "Title",
     "shuffleOptionsInSelection": "Shuffle Options in Selection",
     "printScore": "Print Score",
     "printHintOfAnswer": "Print Hint of Answer",
     "hideQuestionTypeLabel": "Hide Question Type's Label",
     "idsSplitter": "IDs (splitter: ,)",
-    "filterOnTags": "Filter on Tags",
-    "extraInfoTitle": "Extra Info",
-    "selectByCount": "By Count",
-    "selectByID": "By ID",
-    "selectFree": "Free Selection"
+    "selectIds": "Select by ID",
+    "fieldType": "Type",
+    "fieldQuestion": "Question"
   },
   "vocabularyExercises": {
-    "title": "Vocabulary",
-    "start": "Start",
     "print": "Worksheet",
-    "filterGo": "Go",
-    "filterClear": "Clear",
-    "filterNew": "New",
-    "quickSelection": "Selection",
-    "randomSelect": "Select Randomly",
-    "sequenceSelect": "Select Sequentially",
     "selectWords": "Select by Words",
-    "clearSelection": "Clear Selection",
-    "exercises": "Exercises",
     "typing": "Spelling",
-    "test": "Quiz",
-    "optionsOfTest": "Options of Quiz",
     "directionEn2Cn": "English -> Chinese",
     "directionCn2En": "Chinese -> English",
-    "nextQuestion": "Next Question",
-    "previousQuestion": "Previous Question",
     "editWordFilter": "Word filter",
-    "editRatingFilter": "Rating filter",
-    "addCondition": "Add condition",
-    "filterTextRequired": "Text is required",
-    "cancel": "Cancel",
-    "wordOpStartsWith": "Starts with",
-    "wordOpContains": "Contains",
-    "wordOpEqual": "Equal",
-    "wordOpEndsWith": "Ends with",
     "wordOpIsPhrase": "Is phrase",
-    "wordOpNotPhrase": "Not phrase",
-    "ratingAny": "Any",
+    "filterGroup": "Condition group",
+    "filterJoinHint": "Connects the conditions and groups below",
+    "filterJoinSelect": "Join conditions with",
+    "addFilterGroup": "Add group",
+    "removeFilterGroup": "Remove group",
+    "filterGroupNeedsTwo": "A non-root condition group needs at least two members",
+    "filterCondition": "Condition",
+    "filterDetailEmpty": "Select a tree node to edit it",
+    "filterSplitter": "Resize the tree and detail panes",
+    "filterPreview": "Expression",
+    "filterPreviewEmpty": "No conditions",
     "word": "Word",
-    "chinese": "Chinese",
-    "phonetic": "Phonetic",
-    "explanation": "Explanation",
-    "defaultFormTitle": "Vocabulary Exercises",
     "downloadTemplate": "Download Template",
     "addTempFile": "Add Temp. File",
-    "study": "Review",
     "dictation": "Dictation",
     "dictationResult": "Dictation Result",
     "dictating": "Dictating word",
-    "previous": "Previous",
-    "next": "Next",
-    "quit": "Quit",
     "quitConfirmTitle": "Quit Study?",
     "quitConfirmMessage": "Are you sure you want to quit the study session?",
-    "enableAutoMode": "Enable Auto Mode",
-    "pauseAutoMode": "Pause Auto Mode",
-    "resumeAutoMode": "Resume Auto Mode",
-    "stopAutoMode": "Stop Auto Mode",
     "secondsPerWord": "Seconds per word",
     "nextWord": "Next Word",
-    "score": "Score",
-    "correct": "Correct",
-    "incorrect": "Incorrect",
-    "optionsOfStudy": "Options of Review",
-    "disableVoice": "Disable Voice",
     "hideExplaination": "Hide Explaination",
     "voiceAndExplainExclusive": "Voice and explanation cannot both be disabled",
-    "leadingCharacter": "Leading character",
-    "excludedPart": "Excluded Part",
     "optionsOfTyping": "Options of Spelling",
     "optionsOfDictation": "Options of Dictation",
     "optionsOfPrinting": "Options of Worksheet",
-    "subTitle": "Sub Title",
     "printFirstLetter": "Print First Letter",
     "uniformBlankLength": "Uniform Blank Length",
     "uniformBlankLengthSize": "Blank Length",
     "wordsSplitter": "Words (splitter: ,)",
-    "filteredItems": "Filtered"
+    "uploadErrRead": "The selected file could not be read.",
+    "uploadErrUtf16": "The file appears to be UTF-16 encoded. Please re-save it as UTF-8 and try again.",
+    "uploadErrParse": "The file is not valid JSON.",
+    "uploadErrNotArray": "The file must contain a JSON array of word entries.",
+    "uploadErrEmpty": "No valid vocabulary items found in the file.",
+    "uploadWarnSkipped": "{{count}} row(s) skipped (missing or invalid enword/cnword).",
+    "uploadWarnTruncated": "Only the first {{max}} words were imported."
   },
   "translateExercises": {
-    "title": "Sentences",
-    "english": "English",
     "words": "Words",
-    "chinese": "Chinese",
-    "extraInfo": "Extra Info",
     "options": "Options",
-    "allowEmptyAnswer": "Allow Empty Answer",
     "printWord": "Print Word",
     "sentence": "Sentence",
     "translation": "Translation",
@@ -326,24 +234,11 @@
     "chineseToEnglish": "Chinese to English",
     "correct": "Correct",
     "timeCost": "Time cost (in seconds)",
-    "extraInfoTitle": "Extra Info",
-    "explanation": "Explanation"
-  },
-  "selection": {
-    "ratingOperator": "Operator",
-    "ratingValue": "Rating Value",
-    "operatorEquals": "Equals",
-    "operatorGreaterThan": "Greater Than",
-    "operatorLessThan": "Less Than",
-    "operatorLargerOrEquals": "Larger or Equals",
-    "operatorLessOrEquals": "Less or Equals"
+    "editSentenceFilter": "Sentence filter",
+    "secondsPerSentence": "Seconds per sentence"
   },
   "auth": {
-    "login": "Login",
-    "logout": "Logout",
     "signing_in": "Signing you in…",
-    "welcome_user": "Welcome, {{name}}",
-    "not_authorized": "Not authorized",
     "session_expired": "Your session has expired. Please sign in again.",
     "idp_unreachable": "Identity server is not responding. Please try again later.",
     "idp_timeout": "Connection to identity server timed out.",
@@ -357,8 +252,7 @@
   },
   "not_found": {
     "subtitle": "We're sorry. The page you are looking for cannot be found.",
-    "go_home": "Go Home",
-    "read_guides": "Read Guides"
+    "go_home": "Go Home"
   },
   "filter": "Filter",
   "items": "Items",
@@ -384,10 +278,7 @@
   "printAnswer": "Print Answer",
   "hint": "Hint",
   "backToList": "Back to List",
-  "optionsOfSelection": "Options of Selection",
   "countOfSelection": "Count of Selection",
   "countOfOffset": "Offset",
-  "direction": "Direction",
-  "selectByRating": "By Rating",
-  "totalRecords": "Total Records"
+  "direction": "Direction"
 }
diff --git a/src/assets/data/i18n/zh-CN.json b/src/assets/data/i18n/zh-CN.json
index dfa7cee..c7590bd 100644
--- a/src/assets/data/i18n/zh-CN.json
+++ b/src/assets/data/i18n/zh-CN.json
@@ -1,132 +1,33 @@
 {
   "welcome": "欢迎",
-  "language": "语言",
-  "english": "英语",
-  "home": "首页",
-  "about": "关于",
-  "contact": "联系",
-  "settings": "设置",
   "logout": "退出登录",
   "login": "登录",
   "menu": "菜单",
-  "register": "注册",
-  "username": "用户名",
-  "password": "密码",
-  "email": "邮箱",
-  "remember_me": "记住我",
-  "forgot_password": "忘记密码？",
-  "confirm_password": "确认密码",
-  "already_have_account": "已有账户？",
-  "dont_have_account": "没有账户？",
-  "sign_up": "注册",
-  "sign_in": "登录",
-  "dashboard": "仪表盘",
-  "profile": "个人资料",
   "user_detail": "用户详情",
   "user_id": "用户 ID",
   "user_name": "用户名",
-  "search": "搜索",
   "cancel": "取消",
-  "save": "保存",
-  "delete": "删除",
-  "edit": "编辑",
-  "view": "查看",
-  "create": "创建",
-  "update": "更新",
   "close": "关闭",
-  "yes": "是",
   "no": "否",
   "ok": "确定",
-  "back": "返回",
   "next": "下一步",
   "previous": "上一步",
-  "more": "更多",
-  "less": "更少",
-  "all": "全部",
   "none": "无",
   "error": "错误",
-  "success": "成功",
   "loading": "加载中...",
-  "please_wait": "请稍候...",
-  "try_again": "重试",
-  "no_data_found": "未找到数据",
-  "search_results": "搜索结果",
-  "no_results": "未找到结果",
-  "results_count": "{{count}} 条结果",
   "page_not_found": "页面未找到",
-  "something_went_wrong": "出了问题",
-  "server_error": "服务器错误",
-  "network_error": "网络错误",
-  "invalid_input": "输入无效",
   "required_field": "此字段为必填项",
-  "min_length": "最少长度为 {{min}} 个字符",
-  "max_length": "最大长度为 {{max}} 个字符",
-  "email_invalid": "请输入有效的邮箱地址",
-  "password_mismatch": "密码不匹配",
-  "learn_chinese": "学习中文",
-  "learn_english": "学习英语",
-  "translate_exercises": "翻译练习",
-  "math_exercises": "数学练习",
-  "calendar": "日历",
-  "audio_player": "音频播放器",
-  "video_player": "视频播放器",
-  "document_viewer": "文档查看器",
-  "image_gallery": "图片库",
   "quiz": "测验",
-  "exam": "考试",
-  "practice": "练习",
   "review": "复习",
-  "progress": "进度",
-  "statistics": "统计",
-  "reports": "报告",
-  "analytics": "分析",
-  "notifications": "通知",
-  "messages": "消息",
-  "chat": "聊天",
-  "video_call": "视频通话",
-  "screen_share": "屏幕共享",
-  "whiteboard": "白板",
-  "calendar_event": "日历事件",
-  "schedule": "日程",
-  "appointment": "预约",
-  "meeting": "会议",
-  "reminder": "提醒",
-  "task": "任务",
-  "project": "项目",
-  "team": "团队",
-  "collaboration": "协作",
-  "resources": "资源",
-  "documents": "文档",
   "files": "文件",
-  "upload": "上传",
-  "download": "下载",
-  "share": "分享",
-  "copy_link": "复制链接",
   "print": "打印",
-  "export": "导出",
-  "import": "导入",
-  "backup": "备份",
-  "restore": "恢复",
-  "settings_saved": "设置保存成功",
-  "changes_saved": "更改保存成功",
-  "item_deleted": "项目删除成功",
-  "item_created": "项目创建成功",
-  "item_updated": "项目更新成功",
-  "upload_success": "文件上传成功",
-  "upload_failed": "文件上传失败",
-  "download_failed": "文件下载失败",
-  "connection_lost": "连接丢失",
-  "reconnecting": "重新连接中...",
-  "connected": "已连接",
-  "disconnected": "已断开连接",
-  "offline": "离线",
-  "online": "在线",
   "skip_to_main_content": "跳转到主要内容",
   "knowledge_builder": "知识构建器",
   "vocabulary": "词汇",
   "sentences": "句子",
   "listening": "听力",
   "chinese": "中文",
+  "english": "英语",
   "formula": "公式",
   "knowledge_bank": "知识库",
   "enter_code_for_invited_user": "输入邀请码",
@@ -158,24 +59,76 @@
   "join_thousands_of_learners": "加入成千上万已经通过我们智能平台改变学习习惯的学习者。",
   "get_started": "开始学习",
   "explore_features": "探索功能",
-  "chineseExercises": {
-    "title": "中文",
+  "common": {
+    "addCondition": "添加条件",
+    "addFilterGroup": "添加条件组",
     "author": "作者",
-    "defaultFormTitle": "中文练习",
+    "clearSelection": "清空选择",
+    "correct": "正确",
+    "disableVoice": "禁用语音",
+    "editContentFilter": "内容筛选",
+    "editFilter": "筛选",
+    "filterCondition": "条件",
+    "filterDetailEmpty": "请选择左侧树节点进行编辑",
+    "filterEnumNeedsChoice": "至少选择一个值",
+    "filterGroup": "条件组",
+    "filterGroupNeedsTwo": "非根条件组至少需要两个成员",
+    "filterJoinHint": "连接下方的条件与条件组",
+    "filterJoinSelect": "条件连接方式",
+    "filterNeedsValue": "值不能为空",
+    "filterPreview": "表达式",
+    "filterPreviewEmpty": "暂无条件",
+    "filterSplitter": "调整树与详情面板的宽度",
+    "editRatingFilter": "评分筛选",
+    "enableAutoMode": "启用自动模式",
+    "execDateOption": "执行日期选项",
+    "exercises": "练习",
+    "explanation": "讲解",
+    "extraInfo": "额外信息",
+    "filterClear": "清除",
+    "filteredItems": "过滤后",
+    "filterNew": "新建",
+    "filterTextRequired": "文本不能为空",
+    "incorrect": "错误",
+    "joinAnd": "并且",
+    "joinOr": "或者",
+    "next": "下一个",
+    "nextQuestion": "下一题",
+    "opBetween": "介于",
+    "opContains": "包含",
+    "opEndsWith": "结尾是",
+    "opEqual": "等于",
+    "opGreaterOrEqual": "大于等于",
+    "opGreaterThan": "大于",
+    "opLessOrEqual": "小于等于",
+    "opLessThan": "小于",
+    "opStartsWith": "开头是",
+    "optionsOfQuiz": "测验选项",
+    "optionsOfReview": "复习选项",
+    "previous": "上一个",
+    "previousQuestion": "上一题",
+    "quickSelection": "选择",
+    "removeFilterGroup": "删除条件组",
+    "quit": "退出",
+    "randomSelect": "随机选择",
+    "score": "得分",
+    "selectAllVisible": "全选可见行",
+    "sequenceSelect": "顺序选择",
+    "start": "开始",
+    "subTitle": "副标题",
+    "title": "标题"
+  },
+  "chineseExercises": {
     "optionsOfReciting": "中文背诵选项",
     "level": "等级",
     "answerLineBreak": "每行一个答案",
-    "execDateOption": "执行日期选项"
+    "allowEmptyAnswer": "允许空答案",
+    "recite": "背诵"
   },
   "formulaRecites": {
-    "title": "公式",
-    "defaultFormTitle": "公式练习",
-    "column": "列",
     "name": "名称",
     "math": "数学",
     "value": "值",
-    "subTitle": "副标题",
-    "execDateOption": "执行日期选项",
     "printSource": "打印来源",
     "printItemWithRandomOrder": "随机顺序打印项目",
     "generateQuiz": "生成试题",
@@ -183,84 +136,54 @@
     "aiRequestFailed": "AI请求失败，请稍后重试。"
   },
   "vocabularyExercises": {
-    "title": "词汇",
-    "start": "开始",
     "print": "练习纸",
-    "filterGo": "执行",
-    "filterClear": "清除",
-    "filterNew": "新建",
-    "quickSelection": "选择",
-    "randomSelect": "随机选择",
-    "sequenceSelect": "顺序选择",
     "selectWords": "按词选择",
-    "clearSelection": "清空选择",
-    "exercises": "练习",
     "typing": "拼写",
-    "test": "测验",
-    "optionsOfTest": "测验选项",
     "directionEn2Cn": "英语 -> 中文",
     "directionCn2En": "中文 -> 英语",
-    "nextQuestion": "下一题",
-    "previousQuestion": "上一题",
     "editWordFilter": "单词筛选",
-    "editRatingFilter": "评分筛选",
-    "addCondition": "添加条件",
-    "filterTextRequired": "请输入筛选文本",
-    "cancel": "取消",
-    "wordOpStartsWith": "开头是",
-    "wordOpContains": "包含",
-    "wordOpEqual": "等于",
-    "wordOpEndsWith": "结尾是",
     "wordOpIsPhrase": "是词组",
-    "wordOpNotPhrase": "非词组",
-    "ratingAny": "任意",
+    "filterGroup": "条件组",
+    "filterJoinHint": "连接下方的条件与条件组",
+    "filterJoinSelect": "条件连接方式",
+    "addFilterGroup": "添加条件组",
+    "removeFilterGroup": "删除条件组",
+    "filterGroupNeedsTwo": "非根条件组至少需要两个成员",
+    "filterCondition": "条件",
+    "filterDetailEmpty": "请选择左侧树节点进行编辑",
+    "filterSplitter": "调整树与详情面板的宽度",
+    "filterPreview": "表达式",
+    "filterPreviewEmpty": "暂无条件",
     "word": "单词",
-    "chinese": "中文",
-    "phonetic": "音标",
-    "explanation": "解释",
-    "defaultFormTitle": "词汇练习",
     "downloadTemplate": "下载模板",
     "addTempFile": "添加临时文件",
-    "study": "复习",
     "dictation": "听写",
     "dictationResult": "听写结果",
     "dictating": "听写中",
-    "previous": "上一个",
-    "next": "下一个",
-    "quit": "退出",
     "quitConfirmTitle": "退出学习？",
     "quitConfirmMessage": "确定要退出本次学习吗？",
-    "enableAutoMode": "启用自动模式",
-    "pauseAutoMode": "暂停自动模式",
-    "resumeAutoMode": "恢复自动模式",
-    "stopAutoMode": "停止自动模式",
     "secondsPerWord": "每词秒数",
     "nextWord": "下一个词",
-    "score": "得分",
-    "correct": "正确",
-    "incorrect": "错误",
-    "optionsOfStudy": "复习选项",
-    "disableVoice": "禁用语音",
     "hideExplaination": "隐藏讲解",
     "voiceAndExplainExclusive": "不能同时禁用语音和讲解",
     "optionsOfTyping": "拼写选项",
     "optionsOfDictation": "听写选项",
     "optionsOfPrinting": "练习纸选项",
-    "subTitle": "副标题",
     "printFirstLetter": "打印首字母",
     "uniformBlankLength": "统一空格长度",
     "uniformBlankLengthSize": "空格长度",
     "wordsSplitter": "单词（分隔符：,）",
-    "filteredItems": "过滤后"
+    "uploadErrRead": "无法读取所选文件。",
+    "uploadErrUtf16": "文件似乎是 UTF-16 编码，请另存为 UTF-8 后重试。",
+    "uploadErrParse": "文件不是有效的 JSON。",
+    "uploadErrNotArray": "文件必须为包含词条的 JSON 数组。",
+    "uploadErrEmpty": "文件中未找到有效的词汇条目。",
+    "uploadWarnSkipped": "已跳过 {{count}} 行（enword 或 cnword 缺失或无效）。",
+    "uploadWarnTruncated": "仅导入前 {{max}} 个单词。"
   },
   "translateExercises": {
-    "title": "句子",
-    "english": "英语",
     "words": "单词",
-    "chinese": "中文",
-    "extraInfo": "额外信息",
     "options": "选项",
-    "allowEmptyAnswer": "允许空答案",
     "printWord": "打印单词",
     "sentence": "句子",
     "translation": "翻译",
@@ -268,12 +191,10 @@
     "chineseToEnglish": "中译英",
     "correct": "纠正",
     "timeCost": "耗时（秒）",
-    "extraInfoTitle": "额外信息",
-    "explanation": "讲解"
+    "editSentenceFilter": "句子筛选",
+    "secondsPerSentence": "每句秒数"
   },
   "englishListening": {
-    "pageTitle": "听力",
-    "columnTitle": "标题",
     "sections": "章节",
     "openSection": "打开章节",
     "supplementary": "补充材料",
@@ -282,12 +203,10 @@
     "section": "章节",
     "countOfExercises": "练习数量",
     "openDetail": "打开详情",
-    "vocabularyColumn": "词汇",
     "displayVocabulary": "显示词汇",
     "playSection": "播放章节",
     "returnToSectionList": "返回章节列表",
     "itemCollection": "项目/集合",
-    "startExercise": "开始",
     "previousItem": "上一项",
     "nextItem": "下一项",
     "playAudio": "播放音频",
@@ -301,47 +220,25 @@
     "expected": "预期"
   },
   "knowledgeExercises": {
-    "title": "知识库",
     "detailV2Title": "知识库 - 习题详情 V2",
-    "type": "类型",
     "tags": "标签",
-    "refTo": "引用到",
     "difficulty": "难度",
     "estTime": "预计时间（分钟）",
-    "extraInfo": "额外信息",
     "detail": "详情",
-    "previous": "上一个",
-    "next": "下一个",
     "toggleHintOfAnswer": "切换答案提示",
     "answer": "答案",
     "optionsOfKnowledgeExercises": "知识练习选项",
-    "titleOption": "标题",
     "shuffleOptionsInSelection": "随机选择选项",
     "printScore": "打印分数",
     "printHintOfAnswer": "打印答案提示",
     "hideQuestionTypeLabel": "隐藏题目类型标签",
     "idsSplitter": "编号（分隔符：,）",
-    "filterOnTags": "按标签筛选",
-    "extraInfoTitle": "额外信息",
-    "selectByCount": "按数量",
-    "selectByID": "按编号",
-    "selectFree": "随机选择"
-  },
-  "selection": {
-    "ratingOperator": "运算符",
-    "ratingValue": "评分值",
-    "operatorEquals": "等于",
-    "operatorGreaterThan": "大于",
-    "operatorLessThan": "小于",
-    "operatorLargerOrEquals": "大于等于",
-    "operatorLessOrEquals": "小于等于"
+    "selectIds": "按编号选择",
+    "fieldType": "题型",
+    "fieldQuestion": "题干"
   },
   "auth": {
-    "login": "登录",
-    "logout": "退出登录",
     "signing_in": "正在登录……",
-    "welcome_user": "欢迎，{{name}}",
-    "not_authorized": "未授权",
     "session_expired": "会话已过期，请重新登录。",
     "idp_unreachable": "身份认证服务器无响应，请稍后再试。",
     "idp_timeout": "连接身份认证服务器超时。",
@@ -355,8 +252,7 @@
   },
   "not_found": {
     "subtitle": "抱歉，您查找的页面不存在。",
-    "go_home": "返回首页",
-    "read_guides": "阅读指南"
+    "go_home": "返回首页"
   },
   "filter": "筛选",
   "items": "项目",
@@ -382,10 +278,7 @@
   "printAnswer": "打印答案",
   "hint": "提示",
   "backToList": "返回列表",
-  "optionsOfSelection": "选择选项",
   "countOfSelection": "选择数量",
   "countOfOffset": "起始位置",
-  "direction": "方向",
-  "selectByRating": "按评分",
-  "totalRecords": "记录总数"
+  "direction": "方向"
 }
diff --git a/src/styles/_shared-tables.scss b/src/styles/_shared-tables.scss
index 4d42f43..fea39f7 100644
--- a/src/styles/_shared-tables.scss
+++ b/src/styles/_shared-tables.scss
@@ -13,6 +13,11 @@ table[mat-table] {
     background: rgba(0, 0, 0, 0.03);
   }
 
+  // Sorted column header (mat-sort-header)
+  th.mat-sort-header-sorted {
+    color: black;
+  }
+
   // Data cells - consistent padding and borders
   td.mat-mdc-cell {
     padding: 8px 12px;
@@ -79,6 +84,13 @@ table[mat-table] {
   border-right: 1px solid rgba(0, 0, 0, 0.12);
 }
 
+// Row-number column (result tables)
+.mat-column-order {
+  width: 50px;
+  text-align: center;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
+}
+
 // Rating column (mat-button-toggle-group)
 .mat-column-rating {
   width: 200px;
@@ -90,9 +102,6 @@ table[mat-table] {
 .mat-column-extraInfo {
   width: 60px;
   text-align: center;
-}
-
-.mat-column-ai {
   border-right: 1px solid rgba(0, 0, 0, 0.12);
 }
 
@@ -129,6 +138,7 @@ table[mat-table] {
 .mat-column-tags {
   width: 150px;
   text-align: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
 }
 
 // Name / subject columns
@@ -162,7 +172,8 @@ table[mat-table] {
   border-right: 1px solid rgba(0, 0, 0, 0.12);
 }
 
-.mat-column-cnword {
+.mat-column-cnword,
+.mat-column-chinese {
   width: 150px;
   text-align: left;
   border-right: 1px solid rgba(0, 0, 0, 0.12);
@@ -177,7 +188,8 @@ table[mat-table] {
 }
 
 // Content column (Chinese textarea)
-.mat-column-content {
+.mat-column-content,
+.mat-column-explaination {
   text-align: left;
   border-right: 1px solid rgba(0, 0, 0, 0.12);
 }
@@ -185,6 +197,7 @@ table[mat-table] {
 // Value column (formula)
 .mat-column-value {
   text-align: left;
+  border-right: 1px solid rgba(0, 0, 0, 0.12);
 }
 
 // Listening-specific columns

From 4b6f3335b181c9503a71bfffff0f2c375a5637ae Mon Sep 17 00:00:00 2001
From: Alva Chien <alvachien@163.com>
Date: Sun, 30 Aug 2026 18:42:41 +0800
Subject: [PATCH 5/7] chore: bump version to 1.9.0

Also re-syncs package-lock.json with package.json (version fields and the
actslib entry this branch added).

Co-Authored-By: Claude Code <noreply@anthropic.com>
---
 package-lock.json                    | 14 ++++++++++++--
 package.json                         |  3 ++-
 src/environments/environment.prod.ts |  4 ++--
 src/environments/environment.ts      |  4 ++--
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index bd77b82..3d13c13 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "knowledgebuilder",
-  "version": "1.8.433",
+  "version": "1.9.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "knowledgebuilder",
-      "version": "1.8.433",
+      "version": "1.9.0",
       "license": "MIT",
       "dependencies": {
         "@angular/animations": "21.2.21",
@@ -21,6 +21,7 @@
         "@angular/router": "21.2.21",
         "@jsverse/transloco": "^8.2.1",
         "@types/dompurify": "^3.0.5",
+        "actslib": "^0.6.81",
         "angular-auth-oidc-client": "^21.0.2",
         "date-fns": "^4.1.0",
         "dompurify": "^3.4.11",
@@ -4875,6 +4876,15 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/actslib": {
+      "version": "0.6.81",
+      "resolved": "https://registry.npmmirror.com/actslib/-/actslib-0.6.81.tgz",
+      "integrity": "sha512-vdo0E0GCtfGGZUEVoruMaY6yIiflBHTuDUsStDQKfC3QZ+NebA5UaT0SkHx4XCP5cUhNWX/0erezoAhFEIixzQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 24.0"
+      }
+    },
     "node_modules/agent-base": {
       "version": "7.1.4",
       "resolved": "https://registry.npmmirror.com/agent-base/-/agent-base-7.1.4.tgz",
diff --git a/package.json b/package.json
index e451f3c..847d79d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "knowledgebuilder",
-  "version": "1.8.434",
+  "version": "1.9.0",
   "license": "MIT",
   "description": "An AI-powered web-based Learning app for English, Chinese, and Knowledge Bank part.",
   "author": {
@@ -35,6 +35,7 @@
     "@angular/router": "21.2.21",
     "@jsverse/transloco": "^8.2.1",
     "@types/dompurify": "^3.0.5",
+    "actslib": "^0.6.81",
     "angular-auth-oidc-client": "^21.0.2",
     "date-fns": "^4.1.0",
     "dompurify": "^3.4.11",
diff --git a/src/environments/environment.prod.ts b/src/environments/environment.prod.ts
index 6f1d1bd..bc9081f 100644
--- a/src/environments/environment.prod.ts
+++ b/src/environments/environment.prod.ts
@@ -1,8 +1,8 @@
 export const environment = {
   homeurl: 'https://www.alvachien.com/learning',
   production: true,
-  releasedate: '2026-08-25',
-  version: '1.8.434',
+  releasedate: '2026-08-30',
+  version: '1.9.0',
   apiUrl: 'https://www.alvachien.com/learningutil',
   pageTitle: 'Knowledge Builder',
   loginRequired: true,
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index 7f33683..0776f7c 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -6,8 +6,8 @@
 export const environment = {
   homeurl: 'http://localhost:29800',
   production: false,
-  releasedate: '2026-08-25',
-  version: '1.8.434',
+  releasedate: '2026-08-30',
+  version: '1.9.0',
   apiUrl: 'https://localhost:7135',
   pageTitle: 'Knowledge Builder',
   loginRequired: true,

From 1d66b1fbe24b86905e00227fd968e079b62cb23f Mon Sep 17 00:00:00 2001
From: Alva Chien <alvachien@163.com>
Date: Sun, 30 Aug 2026 19:01:09 +0800
Subject: [PATCH 6/7] test(navbar): drive skipLinkHref timeout tests with fake
 timers

The two wall-clock tests (sleep 150ms racing the constructor's
setTimeout(100)) timed out in CI on the linux runner even though they
pass locally. Create the component under a fake setTimeout clock and
advance it deterministically instead.
---
 src/app/shared/navbar/navbar.spec.ts | 49 +++++++++++++++++++---------
 1 file changed, 34 insertions(+), 15 deletions(-)

diff --git a/src/app/shared/navbar/navbar.spec.ts b/src/app/shared/navbar/navbar.spec.ts
index 448c45c..a708e3b 100644
--- a/src/app/shared/navbar/navbar.spec.ts
+++ b/src/app/shared/navbar/navbar.spec.ts
@@ -114,12 +114,23 @@ describe('NavbarComponent', () => {
       expect(component.homeUrl).toBeDefined();
     });
 
-    it('should call getSkipLinkHref after timeout', async () => {
-      fixture.detectChanges();
+    it('should call getSkipLinkHref after timeout', () => {
+      // Deterministic: fake only setTimeout so the constructor's 100 ms
+      // timer is advanced by the test clock instead of racing the wall
+      // clock (a real 150 ms sleep was flaky under CI worker starvation).
+      mockNavigationFocusService.getSkipLinkHref.mockClear();
+      vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
+      try {
+        const testFixture = TestBed.createComponent(NavbarComponent);
+        testFixture.detectChanges();
+
+        vi.advanceTimersByTime(150);
 
-      await new Promise(resolve => setTimeout(resolve, 150));
-      expect(mockNavigationFocusService.getSkipLinkHref).toHaveBeenCalled();
-      expect(component.skipLinkHref).toBe('/test-link');
+        expect(mockNavigationFocusService.getSkipLinkHref).toHaveBeenCalled();
+        expect(testFixture.componentInstance.skipLinkHref).toBe('/test-link');
+      } finally {
+        vi.useRealTimers();
+      }
     });
 
     it('should initialize skipLinkHidden to true', () => {
@@ -128,18 +139,26 @@ describe('NavbarComponent', () => {
   });
 
   describe('OnPush change detection', () => {
-    it('should mark the view for check after the skipLinkHref timeout fires', async () => {
+    it('should mark the view for check after the skipLinkHref timeout fires', () => {
       // Regression: skipLinkHref is set inside a setTimeout(100). With
       // ChangeDetectionStrategy.OnPush the bound href would not reach the
-      // template without markForCheck.
-      const markForCheckSpy = vi.spyOn(component['cdr'], 'markForCheck');
-      markForCheckSpy.mockClear();
-
-      fixture.detectChanges();
-      await new Promise(resolve => setTimeout(resolve, 150));
-
-      expect(component.skipLinkHref).toBe('/test-link');
-      expect(markForCheckSpy).toHaveBeenCalled();
+      // template without markForCheck. The timer is driven by a fake
+      // setTimeout clock so the test never races the wall clock.
+      vi.useFakeTimers({ toFake: ['setTimeout', 'clearTimeout'] });
+      try {
+        const testFixture = TestBed.createComponent(NavbarComponent);
+        const testComponent = testFixture.componentInstance;
+        const markForCheckSpy = vi.spyOn(testComponent['cdr'], 'markForCheck');
+        markForCheckSpy.mockClear();
+
+        testFixture.detectChanges();
+        vi.advanceTimersByTime(150);
+
+        expect(testComponent.skipLinkHref).toBe('/test-link');
+        expect(markForCheckSpy).toHaveBeenCalled();
+      } finally {
+        vi.useRealTimers();
+      }
     });
 
     it('should mark the view for check when auth state arrives (no click needed)', () => {

From a5229f78a93fc337cfdb8b251df0803fbc059ba0 Mon Sep 17 00:00:00 2001
From: Alva Chien <alvachien@163.com>
Date: Sun, 30 Aug 2026 19:13:55 +0800
Subject: [PATCH 7/7] test(markdown-content): await render promise instead of
 whenStable

fixture.whenStable() relies on zone stability and stalled past the 5 s
test timeout on loaded CI runners (two integration tests failed there
while passing locally). Await renderMarkdown() directly, as the other
tests in this file already do.
---
 .../markdown-content.component.spec.ts                | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/shared/markdown-content/markdown-content.component.spec.ts b/src/app/shared/markdown-content/markdown-content.component.spec.ts
index abb6bbf..ccb69d3 100644
--- a/src/app/shared/markdown-content/markdown-content.component.spec.ts
+++ b/src/app/shared/markdown-content/markdown-content.component.spec.ts
@@ -353,11 +353,14 @@ describe('MarkdownContentComponent', () => {
 
   describe('integration tests', () => {
     it('should update rendered content when markdown input changes via ngOnChanges', async () => {
+      // Await the render promise directly instead of fixture.whenStable():
+      // zone-stability waits stalled past the 5 s timeout on loaded CI
+      // runners (the same flake class as the navbar timer tests).
       component.markdown = '# First';
       component.ngOnChanges({
         markdown: new SimpleChange(null, '# First', true),
       });
-      await fixture.whenStable();
+      await component['renderMarkdown']();
 
       const firstHtml = component.renderedContent.toString();
       expect(firstHtml).toContain('First');
@@ -366,7 +369,7 @@ describe('MarkdownContentComponent', () => {
       component.ngOnChanges({
         markdown: new SimpleChange('# First', '# Second', false),
       });
-      await fixture.whenStable();
+      await component['renderMarkdown']();
 
       const secondHtml = component.renderedContent.toString();
       expect(secondHtml).toContain('Second');
@@ -378,13 +381,13 @@ describe('MarkdownContentComponent', () => {
       component.ngOnChanges({
         markdown: new SimpleChange(null, 'Math: $x=1$', true),
       });
-      await fixture.whenStable();
+      await component['renderMarkdown']();
 
       component.enableMath = true;
       component.ngOnChanges({
         enableMath: new SimpleChange(false, true, false),
       });
-      await fixture.whenStable();
+      await component['renderMarkdown']();
 
       expect(component.renderedContent).toBeTruthy();
     });