added translation

src/app/pages/items-list/items-list.component.html

@@ -12,36 +12,36 @@
 
   <div class="filters-bar">
     <mat-form-field appearance="outline" class="search-field">
-      <mat-label>Search items</mat-label>
+      <mat-label>{{ 'SEARCH_ITEMS' | translate }}</mat-label>
       <input 
         matInput 
         [(ngModel)]="searchQuery"
         (keyup.enter)="onSearch()"
-        placeholder="Search by name...">
+        [placeholder]="'SEARCH_PLACEHOLDER' | translate">
       <button mat-icon-button matSuffix (click)="onSearch()">
         <mat-icon>search</mat-icon>
       </button>
     </mat-form-field>
 
     <mat-form-field appearance="outline" class="filter-field">
-      <mat-label>Visibility</mat-label>
+      <mat-label>{{ 'VISIBILITY' | translate }}</mat-label>
       <mat-select [(ngModel)]="visibilityFilter" (selectionChange)="onFilterChange()">
-        <mat-option [value]="undefined">All</mat-option>
-        <mat-option [value]="true">Visible</mat-option>
-        <mat-option [value]="false">Hidden</mat-option>
+        <mat-option [value]="undefined">{{ 'ALL' | translate }}</mat-option>
+        <mat-option [value]="true">{{ 'VISIBLE' | translate }}</mat-option>
+        <mat-option [value]="false">{{ 'HIDDEN' | translate }}</mat-option>
       </mat-select>
     </mat-form-field>
 
     @if (selectedItems().size > 0) {
       <div class="bulk-actions">
-        <span class="selection-count">{{ selectedItems().size }} selected</span>
+        <span class="selection-count">{{ selectedItems().size }} {{ 'SELECTED' | translate }}</span>
         <button mat-raised-button (click)="bulkToggleVisibility(true)">
           <mat-icon>visibility</mat-icon>
-          Show
+          {{ 'SHOW' | translate }}
         </button>
         <button mat-raised-button (click)="bulkToggleVisibility(false)">
           <mat-icon>visibility_off</mat-icon>
-          Hide
+          {{ 'HIDE' | translate }}
         </button>
       </div>
     }
@@ -98,11 +98,11 @@
           
           <div class="item-details">
             <span class="price">{{ item.price }} {{ item.currency }}</span>
-            <span class="quantity">Qty: {{ item.quantity }}</span>
+            <span class="quantity">{{ 'QTY' | translate }}: {{ item.quantity }}</span>
           </div>
 
           <div class="item-meta">
-            <span class="priority">Priority: {{ item.priority }}</span>
+            <span class="priority">{{ 'PRIORITY' | translate }}: {{ item.priority }}</span>
             <mat-icon [class.visible]="item.visible" [class.hidden]="!item.visible">
               {{ item.visible ? 'visibility' : 'visibility_off' }}
             </mat-icon>
@@ -126,20 +126,20 @@
   @if (loading()) {
     <div class="loading-more">
       <mat-spinner diameter="40"></mat-spinner>
-      <span>Loading more items...</span>
+      <span>{{ 'LOADING_MORE' | translate }}</span>
     </div>
   }
 
   @if (!hasMore() && items().length > 0) {
     <div class="end-message">
-      No more items to load
+      {{ 'NO_MORE_ITEMS' | translate }}
     </div>
   }
 
   @if (!loading() && items().length === 0) {
     <div class="empty-state">
       <mat-icon>inventory_2</mat-icon>
-      <p>No items found</p>
+      <p>{{ 'NO_ITEMS_FOUND' | translate }}</p>
     </div>
   }
 

src/app/pages/items-list/items-list.component.ts

@@ -17,6 +17,8 @@ import { ApiService } from '../../services';
 import { Item } from '../../models';
 import { CreateDialogComponent } from '../../components/create-dialog/create-dialog.component';
 import { ConfirmDialogComponent } from '../../components/confirm-dialog/confirm-dialog.component';
+import { LanguageService } from '../../services/language.service';
+import { TranslatePipe } from '../../pipes/translate.pipe';
 
 @Component({
   selector: 'app-items-list',
@@ -34,7 +36,8 @@ import { ConfirmDialogComponent } from '../../components/confirm-dialog/confirm-
     MatSelectModule,
     MatToolbarModule,
     MatSnackBarModule,
-    MatDialogModule
+    MatDialogModule,
+    TranslatePipe
   ],
   templateUrl: './items-list.component.html',
   styleUrls: ['./items-list.component.scss']
@@ -60,7 +63,8 @@ export class ItemsListComponent implements OnInit, AfterViewInit, OnDestroy {
     private router: Router,
     private apiService: ApiService,
     private snackBar: MatSnackBar,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    public lang: LanguageService
   ) {}
 
   ngOnInit() {